@import url('//fonts.googleapis.com/css?family=Bangers');

.codepen-wrapper[data-codepen-id="XbRGXd"] *, .codepen-wrapper[data-codepen-id="XbRGXd"] *:before, .codepen-wrapper[data-codepen-id="XbRGXd"] *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] html,
.codepen-wrapper[data-codepen-id="XbRGXd"] body {
line-height: 1;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] html {
font-size: 1px;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] body {
font-size: 0;
text-align: center;
margin: 5rem 0;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] h1 {
display: inline-block;
font-family: Bangers, cursive;
font-size: 7rem;
font-weight: bold;
padding: 0 2.5rem;
margin: 2rem 0 3rem 0;
border-bottom: solid .7rem #000;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] h1 span {
font-size: .65em;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero {
position: relative;
display: inline-block;
vertical-align: bottom;
margin: 3rem;
width: 30rem;
height: 30rem;
z-index: 1;
background: #bfc4d2;
text-align: left;
border: solid .1rem #7d87a4;
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.4);
border-radius: .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero *, .codepen-wrapper[data-codepen-id="XbRGXd"] #hero *:before, .codepen-wrapper[data-codepen-id="XbRGXd"] #hero *:after {
transition: all 0.14s cubic-bezier(0.13, 1, 0.44, 0.81);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero header {
position: absolute;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero main {
position: absolute;
z-index: -1;
left: 0;
bottom: 2.6rem;
width: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero main:before {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
margin-left: -11.3rem;
border-style: solid;
border-color: transparent;
border-width: 4.4rem 11.3rem 14.4rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero main:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
border-style: solid;
border-color: transparent;
border-width: 4.4rem 0 14.4rem 11.3rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header {
background: #000;
width: 5.6rem;
height: 6.6rem;
top: 3.2rem;
left: 50%;
margin-left: -2.8rem;
border-top-left-radius: 3rem 2.8rem;
border-top-right-radius: 3rem 2.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header:before {
content: " ";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
margin-top: -.3rem;
margin-left: -2.8rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 1.6rem 2.5rem .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header:after {
content: " ";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
margin-top: -.3rem;
margin-left: .9rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 .3rem 2.5rem 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(1) {
position: absolute;
width: 6.2rem;
left: 50%;
bottom: 0;
margin-left: -3.1rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 .4rem 5rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(2) {
position: absolute;
width: 4.8rem;
left: 50%;
bottom: 0;
margin-left: -2.4rem;
margin-bottom: -.3rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 1.9rem .4rem 0 .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
margin-top: -2rem;
margin-left: -2.6rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .8rem 2.6rem 0 2.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(2):after {
content: " ";
position: absolute;
width: 4rem;
left: 50%;
bottom: 0;
margin-left: -2rem;
margin-bottom: -1.1rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 1.1rem 1.3rem 0 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(3) {
position: absolute;
top: 3.1rem;
left: .5rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: .9rem 1.2rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(3):after {
content: " ";
position: absolute;
top: -1rem;
left: -.9rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .5rem 0 0 2.2rem;
-webkit-animation: batman-blink 2s infinite alternate ease-out;
animation: batman-blink 2s infinite alternate ease-out;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(4) {
position: absolute;
top: 3.1rem;
right: .5rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: .9rem 1.2rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman header div:nth-child(4):after {
content: " ";
position: absolute;
top: -1rem;
right: -1rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .5rem 2.2rem 0 0;
-webkit-animation: batman-blink 2s infinite alternate ease-out;
animation: batman-blink 2s infinite alternate ease-out;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman main:before {
border-right-color: #000;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman main:after {
border-left-color: #000;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 0;
margin-left: -7rem;
border-style: solid;
border-color: transparent #352f3a transparent transparent;
border-width: 4.4rem 7rem 9rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 0;
border-style: solid;
border-color: transparent transparent transparent #352f3a;
border-width: 4.4rem 0 9rem 7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman main div:nth-child(2) {
position: absolute;
background: #000;
overflow: hidden;
z-index: 1;
width: 7rem;
height: 2.4rem;
left: 50%;
margin-top: -9.9rem;
margin-left: -3.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman main div:nth-child(2):before {
content: " ";
position: absolute;
background: transparent;
width: 7rem;
height: 7rem;
top: -7rem;
left: 0;
border-radius: 3rem / 1.5rem;
box-shadow: -3.3rem 8.4rem 0 0 #352f3a, -6rem 6.8rem 0 0 #352f3a, 3.3rem 8.4rem 0 0 #352f3a, 6rem 6.8rem 0 0 #352f3a;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.batman main div:nth-child(2):after {
content: " ";
position: absolute;
background: transparent;
width: 1.2rem;
height: .6rem;
top: -.6rem;
left: 0;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
box-shadow: 2.3rem .6rem 0 0 #352f3a, 3.5rem .6rem 0 0 #352f3a, 2.9rem .5rem 0 -.2rem #352f3a;
}

@-webkit-keyframes batman-blink {
.codepen-wrapper[data-codepen-id="XbRGXd"] 80%,
100% {
border-top-width: 1rem;
}
}
@keyframes batman-blink {
.codepen-wrapper[data-codepen-id="XbRGXd"] 80%,
100% {
border-top-width: 1rem;
}
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header {
background: #ccc;
width: 5.6rem;
height: 4.8rem;
top: 5.2rem;
left: 50%;
margin-left: -2.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header:before {
content: " ";
position: absolute;
background: #ccc;
z-index: 1;
width: 6.8rem;
height: 1.6rem;
top: 1.8rem;
left: 50%;
margin-left: -3.4rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header:after {
content: " ";
position: absolute;
z-index: 1;
width: 5.6rem;
top: 100%;
border-style: solid;
border-color: #ccc transparent transparent transparent;
border-width: 2.5rem 1.9rem 0 1.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(1) {
position: absolute;
background: #00770e;
width: 7.6rem;
height: 5.2rem;
top: -3.5rem;
left: 50%;
margin-left: -3.8rem;
border-bottom-left-radius: 1.5rem 4.7rem;
border-bottom-right-radius: 1.5rem 4.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(1):before {
content: " ";
position: absolute;
background: #bfc4d2;
width: 7.6rem;
height: .8rem;
top: 0;
left: 0;
border-bottom-left-radius: 1rem .8rem;
border-bottom-right-radius: 1rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(1):after {
content: " ";
position: absolute;
background: #00770e;
width: 6.2rem;
height: 1.3rem;
top: 4px;
left: 6px;
border-top-left-radius: 3.8rem 1.2rem;
border-top-right-radius: 3.8rem 1.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(2):before {
content: " ";
position: absolute;
background: #ccc;
width: 2.8rem;
height: 3.2rem;
top: -1.5rem;
left: 0;
border-top-left-radius: .9rem 1.4rem;
border-top-right-radius: 1.9rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(2):after {
content: " ";
position: absolute;
background: #ccc;
width: 2.8rem;
height: 3.2rem;
top: -1.5rem;
left: 50%;
border-top-left-radius: 1.9rem 1.4rem;
border-top-right-radius: .9rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(3) {
position: absolute;
background: #ffeca5;
z-index: 3;
width: 4.8rem;
height: 2.8rem;
top: 3.1rem;
left: 50%;
margin-left: -2.4rem;
border: solid .2rem #d11124;
border-bottom-width: .3rem;
border-bottom-left-radius: 1.9rem 3rem;
border-bottom-right-radius: 1.9rem 3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(3):before {
content: " ";
position: absolute;
background: #ccc;
z-index: 1;
width: 4.6rem;
height: 1.4rem;
top: -4px;
left: 50%;
margin-left: -2.3rem;
border-bottom: solid .2rem #d11124;
border-bottom-left-radius: 2.2rem 1.8rem;
border-bottom-right-radius: 2.2rem 1.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 2;
top: .5rem;
left: 50%;
margin-left: -.7rem;
border-style: solid;
border-color: #ccc transparent transparent transparent;
border-width: 1.1rem .7rem 0 .7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.2rem;
height: 1.5rem;
top: .8rem;
right: 50%;
margin-right: .4rem;
border-top-left-radius: .6rem 1.7rem;
border-top-right-radius: 1.6rem 1.7rem;
box-shadow: inset .2rem -.3rem 0 0 #ccc, inset .1rem .2rem 0 0 #00770e;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker header div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 1;
width: 2.2rem;
height: 1.5rem;
top: .8rem;
left: 50%;
margin-left: .4rem;
border-top-left-radius: 1.6rem 1.7rem;
border-top-right-radius: .6rem 1.7rem;
box-shadow: inset -.2rem -.3rem 0 0 #ccc, inset -.1rem .2rem 0 0 #00770e;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker main:before {
border-right-color: #460186;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker main:after {
border-left-color: #460186;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker main div:nth-child(1) {
position: absolute;
z-index: 2;
width: 0;
left: 50%;
bottom: 0;
margin-left: -2.9rem;
border-style: solid;
border-color: #ffaa00 transparent transparent transparent;
border-width: 17.9rem 2.9rem 0 2.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 11.8rem;
top: 0;
left: 50%;
margin-top: -17.5rem;
margin-left: -5.9rem;
border-style: solid;
border-color: transparent transparent #460186 transparent;
border-width: 0 .2rem 1rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 11.4rem;
top: 0;
left: 50%;
margin-top: -19.3rem;
margin-left: -5.7rem;
border-style: solid;
border-color: transparent transparent #460186 transparent;
border-width: 0 5.7rem 1.8rem 5.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker main div:nth-child(3) {
position: absolute;
background: #00770e;
z-index: 3;
width: .8rem;
height: .8rem;
top: 0;
left: 50%;
margin-top: -14.2rem;
margin-left: -.4rem;
border-radius: 50%;
box-shadow: 3.9rem 1rem 0 .8rem #00770e;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.joker main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 4rem;
height: 1.1rem;
margin-top: -.1rem;
margin-left: -2rem;
border-style: solid;
border-color: transparent #00770e;
border-width: .3rem 1.8rem .6rem 1.9rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header {
width: 6.2rem;
height: 4.5rem;
top: 6.2rem;
left: 50%;
margin-left: -3.1rem;
border-style: solid;
border-color: #242c8f transparent transparent transparent;
border-width: 4.5rem .6rem 0 .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header:before {
content: " ";
position: absolute;
background: #ffaa77;
z-index: 1;
width: 4.8rem;
height: 2.5rem;
top: 0;
left: 50%;
margin-top: -3.9rem;
margin-left: -2.4rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header:after {
content: " ";
position: absolute;
background: #242c8f;
z-index: 1;
width: 4.8rem;
height: .4rem;
top: 0;
left: 50%;
margin-top: -3.9rem;
margin-left: -2.4rem;
border-bottom-left-radius: 2.4rem .5rem;
border-bottom-right-radius: 2.4rem .5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(1) {
position: absolute;
z-index: 2;
width: 3.4rem;
left: 50%;
margin-top: -1.5rem;
margin-left: -1.7rem;
border-style: solid;
border-color: transparent transparent #ffaa77 transparent;
border-width: 0 .1rem 2.2rem .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 2;
width: 3.4rem;
left: 50%;
margin-top: 2.2rem;
margin-left: -1.7rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: .9rem .7rem 0 .7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(2) {
position: absolute;
background: #ffaa77;
z-index: -1;
width: 6.8rem;
height: 1.6rem;
top: -3.3rem;
left: 50%;
margin-left: -3.4rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(3):before {
content: " ";
position: absolute;
background: #ff1800;
z-index: 1;
width: 1.5rem;
height: .5rem;
top: -2.6rem;
left: .5rem;
border-top-right-radius: 1.5rem .2rem;
border-bottom-left-radius: 1rem .5rem;
border-bottom-right-radius: .5rem .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(3):after {
content: " ";
position: absolute;
background: #ff1800;
z-index: 1;
width: 1.5rem;
height: .5rem;
top: -2.6rem;
right: .5rem;
border-top-left-radius: 1.5rem .2rem;
border-bottom-left-radius: .5rem .3rem;
border-bottom-right-radius: 1rem .5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(4) {
position: absolute;
z-index: 2;
width: 3.6rem;
height: 3.5rem;
top: -4.5rem;
left: -1.2rem;
border-top-left-radius: 30px 38px;
border-top-right-radius: 4px 5px;
box-shadow: 0 -1.3rem 0 0 #742f03;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 2;
width: 3.2rem;
height: 2.5rem;
top: rem;
left: 3.6rem;
border-top-left-radius: .4rem .5rem;
border-top-right-radius: 2.1rem 1.6rem;
box-shadow: 0 -1.3rem 0 0 #742f03;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 2;
width: 7.1rem;
height: 5.5rem;
top: -2.5rem;
left: -.6rem;
border-top-left-radius: 4.1rem 4rem;
border-top-right-radius: 3.6rem 2.5rem;
border-top: solid 1.7rem #742f03;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(5) {
position: absolute;
z-index: 2;
width: 3.6rem;
height: 2.5rem;
top: -4.7rem;
left: -1.4rem;
border-top-left-radius: 30px 14px;
box-shadow: 0 -1.3rem 0 0 #742f03;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit header div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 2;
width: 5.1rem;
height: 1.3rem;
top: -1.9rem;
left: 4.6rem;
border-top-left-radius: 6.6rem 4rem;
border-top-right-radius: 3.6rem 2.5rem;
border-left: solid 1.7rem #742f03;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main:before {
border-right-color: #cc6611;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main:after {
border-left-color: #cc6611;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(1) {
position: absolute;
z-index: 2;
width: 9.4rem;
left: 50%;
bottom: 0;
margin-left: -4.7rem;
border-style: solid;
border-color: #a91276 transparent transparent transparent;
border-width: 16rem 4.7rem 0 4.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 8.6rem;
top: 0;
left: 50%;
margin-top: -16.3rem;
margin-left: -4.3rem;
border-style: solid;
border-color: #597fe5 transparent transparent transparent;
border-width: 3.1rem 2.2rem 0 2.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 8.4rem;
top: 0;
left: 50%;
margin-top: -16.9rem;
margin-left: -4.2rem;
border-style: solid;
border-color: #242c8f transparent transparent transparent;
border-width: 3.2rem 2.4rem 0 2.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 11.8rem;
top: 0;
left: 50%;
margin-top: -17.5rem;
margin-left: -5.9rem;
border-style: solid;
border-color: #cc6611 transparent transparent transparent;
border-width: .8rem .5rem 0 .5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 11.8rem;
top: 0;
left: 50%;
margin-top: -18.6rem;
margin-left: -5.9rem;
border-style: solid;
border-color: transparent transparent #cc6611 transparent;
border-width: 0 5.9rem 1.1rem 5.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 2;
width: 0;
top: 0;
left: 50%;
margin-top: -17rem;
margin-left: -5rem;
border-style: solid;
border-color: #cc6611 transparent transparent transparent;
border-width: 2.8rem 2.8rem 0 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 2;
width: 0;
top: 0;
right: 50%;
margin-top: -17rem;
margin-right: -5rem;
border-style: solid;
border-color: #cc6611 transparent transparent transparent;
border-width: 2.8rem 0 0 2.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(4) {
position: absolute;
z-index: 2;
top: 0;
left: 50%;
margin-top: -13rem;
margin-left: 4.1rem;
border-radius: .2rem;
transform: rotateZ(15deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(4):before {
content: " ";
background: #fff;
display: block;
width: 2.1rem;
height: 2.9rem;
box-shadow: inset 0 -.2rem 0 .8rem #fff, inset 0 .4rem 0 .8rem #fff, inset 0 0 0 2.1rem #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.gambit main div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 2;
width: 0;
right: 0;
bottom: 0;
margin-right: -.1rem;
margin-bottom: -.1rem;
border-style: solid;
border-color: transparent transparent #cc6611 transparent;
border-width: 0 0 .9rem 2.6rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header {
background: #ff1800;
width: 6.8rem;
height: 10.1rem;
top: 1.7rem;
left: 50%;
margin-left: -3.4rem;
border-top-left-radius: 3.4rem;
border-top-right-radius: 3.4rem;
border-bottom-left-radius: 3.5rem 3.1rem;
border-bottom-right-radius: 3.5rem 3.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(1) {
position: absolute;
background: #460186;
z-index: 1;
width: 1.8rem;
height: 4.2rem;
top: 5.9rem;
left: 50%;
margin-left: -.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(1):before {
content: " ";
position: absolute;
background: #460186;
z-index: 1;
width: 3rem;
height: 2.6rem;
top: -2.6rem;
right: 50%;
border-top-left-radius: 1rem 1.3rem;
border-top-right-radius: 2rem 1.3rem;
border-bottom-left-radius: 1.4rem 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(1):after {
content: " ";
position: absolute;
background: #460186;
z-index: 1;
width: 3rem;
height: 2.6rem;
top: -2.6rem;
left: 50%;
border-top-left-radius: 2rem 1.3rem;
border-top-right-radius: 1rem 1.3rem;
border-bottom-right-radius: 1.4rem 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(2) {
position: absolute;
background: #000;
z-index: 1;
width: 1.2rem;
height: 4.2rem;
top: 5.6rem;
left: 50%;
margin-left: -.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(2):before {
content: " ";
position: absolute;
background: #000;
z-index: 1;
width: 2.7rem;
height: 2rem;
top: -2rem;
right: 50%;
border-top-left-radius: 1rem 1.3rem;
border-top-right-radius: 2rem 1.3rem;
border-bottom-left-radius: 1.4rem 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(2):after {
content: " ";
position: absolute;
background: #000;
z-index: 1;
width: 2.7rem;
height: 2rem;
top: -2rem;
left: 50%;
border-top-left-radius: 2rem 1.3rem;
border-top-right-radius: 1rem 1.3rem;
border-bottom-right-radius: 1.4rem 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(3):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.1rem;
height: .6rem;
top: 4.5rem;
right: 50%;
margin-right: .8rem;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(3):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.1rem;
height: .6rem;
top: 4.5rem;
left: 50%;
margin-left: .8rem;
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(4) {
position: absolute;
z-index: 1;
width: 3rem;
height: 1.5rem;
top: 1.4rem;
left: 50%;
margin-left: -1.5rem;
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
border-bottom: solid .6rem #460186;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto header div:nth-child(4):after {
content: " ";
position: absolute;
background: #460186;
z-index: 1;
width: .4rem;
height: 1.3rem;
top: .5rem;
left: 50%;
margin-left: -.2rem;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main:before {
border-right-color: #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main:after {
border-left-color: #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 0;
left: 50%;
margin-top: -17.9rem;
margin-left: -11.3rem;
border-style: solid;
border-color: transparent #460186 transparent transparent;
border-width: 3.5rem 3.4rem 1.5rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 0;
right: 50%;
margin-top: -17.9rem;
margin-right: -11.3rem;
border-style: solid;
border-color: transparent transparent transparent #460186;
border-width: 3.5rem 0 1.5rem 3.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 0;
left: 50%;
margin-top: -17.9rem;
margin-left: -7.9rem;
border-style: solid;
border-color: transparent transparent transparent #460186;
border-width: 2.1rem 0 2.9rem 4.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 0;
right: 50%;
margin-top: -17.9rem;
margin-right: -7.8rem;
border-style: solid;
border-color: transparent #460186 transparent transparent;
border-width: 2.1rem 4.6rem 2.9rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 0;
left: 50%;
margin-top: -19.2rem;
margin-left: -9rem;
border-style: solid;
border-color: transparent #460186 transparent transparent;
border-width: 4.2rem 7.7rem 1.8rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
width: 0;
height: 0;
top: 0;
right: 50%;
margin-top: -19.2rem;
margin-right: -9rem;
border-style: solid;
border-color: transparent transparent transparent #460186;
border-width: 4.2rem 0 1.8rem 7.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.magneto main div:nth-child(4) {
position: absolute;
background: #460186;
z-index: 1;
width: 2.8rem;
height: 7.7rem;
top: 0;
left: 50%;
margin-top: -19.9rem;
margin-left: -1.4rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header {
background: #ffee00;
width: 6rem;
height: 6rem;
top: 3.6rem;
left: 50%;
margin-left: -3rem;
border-bottom: solid 1.7rem #ffaa77;
border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header:before {
content: " ";
position: absolute;
z-index: 1;
width: 6rem;
top: 100%;
margin-top: 1.6rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 2.2rem 2.1rem 0 2.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header:after {
content: " ";
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -2.6rem;
border-style: solid;
border-color: #ffee00 transparent transparent transparent;
border-width: 1.3rem 2.6rem 0 2.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(1) {
position: absolute;
z-index: 1;
width: 5.2rem;
top: 100%;
left: 50%;
margin-left: -2.6rem;
border-style: solid;
border-color: transparent #000 transparent #000;
border-width: 1rem 1.2rem 1rem 1.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
height: 2.2rem;
top: 100%;
left: 50%;
margin-top: -1.2rem;
margin-left: -3rem;
border-style: solid;
border-color: #000 #000 transparent transparent;
border-width: 1.3rem .4rem .4rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
height: 2.2rem;
top: 100%;
right: 50%;
margin-top: -1.2rem;
margin-right: -3rem;
border-style: solid;
border-color: #000 transparent transparent #000;
border-width: 1.3rem 0 .4rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(2) {
position: absolute;
background: #000;
z-index: 2;
width: 4rem;
height: 3rem;
top: 2.5rem;
right: 50%;
margin-right: -.1rem;
border-top-right-radius: 2.6rem;
transform: rotateZ(27deg);
transform-origin: right center;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
left: 100%;
bottom: 0;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 .7rem .5rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 4rem;
height: 3rem;
top: -.4rem;
left: -1.7rem;
border-left: solid 3rem #000;
border-top-left-radius: 4.7rem 2.2rem;
transform: rotateZ(-85deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(3) {
position: absolute;
background: #000;
z-index: 2;
width: 4rem;
height: 3rem;
top: 2.5rem;
left: 50%;
margin-right: -.1rem;
border-top-left-radius: 2.6rem;
transform: rotateZ(-27deg);
transform-origin: left center;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
right: 100%;
bottom: 0;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 0 .5rem .7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
width: 4rem;
height: 3rem;
top: -.4rem;
right: -1.7rem;
border-right: solid 3rem #000;
border-top-right-radius: 4.7rem 2.2rem;
transform: rotateZ(85deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(4):before {
content: " ";
position: absolute;
background: #fff;
z-index: 2;
width: .9rem;
height: .4rem;
top: 3.6rem;
right: 50%;
margin-right: 1rem;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
transform: rotateZ(7deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine header div:nth-child(4):after {
content: " ";
position: absolute;
background: #fff;
z-index: 2;
width: .9rem;
height: .4rem;
top: 3.6rem;
left: 50%;
margin-left: 1rem;
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
transform: rotateZ(-7deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main:before {
border-right-color: #ffee00;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main:after {
border-left-color: #ffee00;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(1) {
position: absolute;
background: #ff1800;
z-index: 1;
width: 4.2rem;
height: 4.2rem;
left: 50%;
bottom: 9.5rem;
margin-left: -2.1rem;
border-radius: 50%;
border: solid .5rem #ffee00;
box-shadow: 0 0 0 .1rem #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(1):before {
content: " ";
position: absolute;
background: #ffee00;
z-index: 1;
width: 3.2rem;
height: .6rem;
top: 50%;
left: 0;
margin-top: -.3rem;
transform: rotateZ(-45deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(1):after {
content: " ";
position: absolute;
background: #ffee00;
z-index: 1;
width: 3.2rem;
height: .6rem;
top: 50%;
left: 0;
margin-top: -.3rem;
transform: rotateZ(45deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 6.3rem;
margin-left: -6.8rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: 1.1rem 3.2rem 0 1.8rem;
transform: rotateZ(19deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 6.3rem;
margin-right: -6.8rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: 1.1rem 1.8rem 0 3.2rem;
transform: rotateZ(-19deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 4.4rem;
margin-left: -5rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .9rem 2.4rem 0 1.6rem;
transform: rotateZ(20deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 4.4rem;
margin-right: -5rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .9rem 1.6rem 0 2.4rem;
transform: rotateZ(-20deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 2.7rem;
margin-left: -3.2rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .6rem 1.7rem 0 1.2rem;
transform: rotateZ(20deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 2.7rem;
margin-right: -3.2rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .6rem 1.2rem 0 1.7rem;
transform: rotateZ(-20deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 12.4rem;
margin-left: -4.9rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: 4.5rem .4rem 0 .6rem;
transform: rotateZ(-23deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(5):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 12.4rem;
margin-right: -4.9rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: 4.5rem .6rem 0 .4rem;
transform: rotateZ(23deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(6) {
position: absolute;
z-index: 1;
left: 50%;
bottom: 9.8rem;
margin-left: -12.2rem;
border-style: solid;
border-color: transparent #0d50c4 transparent transparent;
border-width: 2rem 5.4rem 5rem 0;
transform: rotateZ(9deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(6):before {
content: " ";
position: absolute;
z-index: 1;
left: -1px;
bottom: 6px;
border-style: solid;
border-color: #0d50c4 transparent transparent transparent;
border-width: .8rem 5.8rem 0 0;
transform: rotateZ(-14deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(7) {
position: absolute;
z-index: 1;
right: 50%;
bottom: 9.8rem;
margin-right: -12.2rem;
border-style: solid;
border-color: transparent transparent transparent #0d50c4;
border-width: 2rem 0 5rem 5.4rem;
transform: rotateZ(-9deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.wolverine main div:nth-child(7):before {
content: " ";
position: absolute;
z-index: 1;
right: -1px;
bottom: 6px;
border-style: solid;
border-color: #0d50c4 transparent transparent transparent;
border-width: .8rem 0 0 5.8rem;
transform: rotateZ(14deg);
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header {
width: 5.8rem;
height: 5rem;
top: 4.8rem;
left: 50%;
margin-left: -2.9rem;
border-top: solid 3.8rem #ffaa77;
border-bottom: solid 1.2rem #0d50c4;
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header:before {
content: " ";
position: absolute;
background: #ff1800;
z-index: 1;
width: 6.4rem;
height: 1.6rem;
top: -1.6rem;
left: 50%;
margin-left: -3.2rem;
border: solid .4rem #ffcc00;
border-radius: .2rem;
box-shadow: inset 0 -.1rem 0 0 #991100, inset .4rem 0 0 0 #ff1800, inset .7rem 0 0 0 #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header:after {
content: " ";
position: absolute;
background: #ffaa77;
z-index: 1;
width: 4rem;
height: 2.3rem;
top: 0;
left: 50%;
margin-left: -2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header div:nth-child(1) {
position: absolute;
z-index: 1;
width: 4rem;
height: 0;
top: 2.3rem;
left: 50%;
margin-left: -2rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 1rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header div:nth-child(2) {
position: absolute;
z-index: 1;
width: 6rem;
height: 4rem;
top: -5.6rem;
left: 50%;
margin-left: -3rem;
border-top: solid 2rem #550000;
border-left: solid .5rem #550000;
border-right: solid .5rem #550000;
border-top-left-radius: 3rem 3rem;
border-top-right-radius: 3rem 3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.2rem;
height: 1.8rem;
top: -2.1rem;
left: 2.3rem;
border-bottom: solid 1.4rem #550000;
border-bottom-right-radius: 2.2rem 1.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 1.2rem;
height: 1.8rem;
top: -1.6rem;
left: 3.9rem;
border-left: solid 1rem #550000;
border-top-left-radius: 2.2rem 1.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header div:nth-child(3) {
position: absolute;
z-index: 1;
width: 1.2rem;
height: 1.8rem;
top: -4.3rem;
left: 3.2rem;
border-left: solid .8rem #550000;
border-bottom-left-radius: 2.2rem 1.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 1.2rem;
height: 1.8rem;
top: -.9rem;
left: -3.6rem;
border-right: solid 1rem #550000;
border-top-right-radius: 2.2rem 1.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops header div:nth-child(3):after {
content: " ";
position: absolute;
background: #550000;
z-index: 1;
width: 1.8rem;
height: 1.2rem;
top: -.2rem;
left: -2.4rem;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main:before {
border-right-color: #0d50c4;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main:after {
border-left-color: #0d50c4;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main div:nth-child(1) {
position: absolute;
z-index: 1;
width: 1.5rem;
height: 16.6rem;
top: -17.6rem;
left: 50%;
margin-left: 1.9rem;
border-style: solid;
border-color: transparent transparent transparent #ffcc00;
border-width: .4rem 0 2.5rem 1.5rem;
transform: rotateZ(7deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 1.5rem;
height: 11rem;
top: -1.5rem;
left: -6.1rem;
border-style: solid;
border-color: transparent transparent transparent #ffcc00;
border-width: 1rem 0 0 1.5rem;
transform: rotateZ(-62deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main div:nth-child(1):after {
content: " ";
position: absolute;
background: #ffcc00;
z-index: 1;
width: 4.6rem;
height: 4.6rem;
top: 3.3rem;
left: -3rem;
border: solid .2rem #ff1800;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main div:nth-child(2) {
position: absolute;
background: #ff1800;
overflow: hidden;
z-index: 1;
width: 3rem;
height: 3rem;
left: 50%;
bottom: 10.1rem;
margin-left: 1.5rem;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main div:nth-child(2):before {
content: " ";
position: absolute;
background: #000;
z-index: 1;
width: 3rem;
height: .6rem;
top: 50%;
left: 0;
margin-top: -.3rem;
transform: rotateZ(-45deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.cyclops main div:nth-child(2):after {
content: " ";
position: absolute;
background: #000;
z-index: 1;
width: 3rem;
height: .6rem;
top: 50%;
left: 0;
margin-top: -.3rem;
transform: rotateZ(45deg);
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header {
background: #339911;
width: 6.2rem;
height: 5.5rem;
top: 3.2rem;
left: 50%;
margin-left: -3.1rem;
border-top-left-radius: 3.1rem;
border-top-right-radius: 3.1rem;
border-top: solid 1rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header:before {
content: " ";
position: absolute;
z-index: 1;
width: 10.6rem;
top: 0;
left: 50%;
margin-top: 4.5rem;
margin-left: -5.3rem;
border-style: solid;
border-color: transparent transparent #339911 transparent;
border-width: 0 2.2rem 2rem 2.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header:after {
content: " ";
position: absolute;
background: #339911;
z-index: -1;
width: 7.2rem;
height: 1.6rem;
top: 3rem;
left: 50%;
margin-left: -3.6rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .6rem;
border-bottom-right-radius: 1.2rem .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(1) {
position: absolute;
z-index: 1;
width: 4.2rem;
top: 5rem;
left: 50%;
margin-left: -2.1rem;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0 .5rem 2rem .5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
top: .9rem;
left: -.3rem;
border-style: solid;
border-color: transparent transparent transparent #000;
border-width: .1rem 0 .1rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
top: .9rem;
right: -.3rem;
border-style: solid;
border-color: transparent #000 transparent transparent;
border-width: .1rem .8rem .1rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(2):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: .9rem;
height: .5rem;
top: 3.2rem;
left: 1.1rem;
border-top-right-radius: .9rem .5rem;
border-bottom-left-radius: .9rem;
border-bottom-right-radius: .6rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
top: 2.8rem;
left: 50%;
margin-left: -2.4rem;
border-style: solid;
border-color: transparent transparent transparent #000;
border-width: .5rem 0 0 2.1rem;
transform: rotateZ(15deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(3):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: .9rem;
height: .5rem;
top: 3.2rem;
right: 1.1rem;
border-top-left-radius: .9rem .5rem;
border-bottom-left-radius: .6rem .4rem;
border-bottom-right-radius: .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
top: 2.8rem;
right: 50%;
margin-right: -2.4rem;
border-style: solid;
border-color: transparent #000 transparent transparent;
border-width: .5rem 2.1rem 0 0;
transform: rotateZ(-15deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(4) {
position: absolute;
z-index: 1;
width: 2.2rem;
height: 1.3rem;
top: -.4rem;
left: .8rem;
border-top-left-radius: 1.1rem 1.3rem;
border-top-right-radius: 1.1rem 1.3rem;
border-top: solid .6rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
width: 1.2rem;
height: 2rem;
top: -.8rem;
left: 1.9rem;
border-top-right-radius: 1.1rem 1.6rem;
border-top: solid 1rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 1;
width: 1.4rem;
height: 2rem;
top: -.6rem;
left: 2.9rem;
border-top-right-radius: 1.1rem 1.6rem;
border-top: solid .9rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(5) {
position: absolute;
z-index: 1;
width: 1.2rem;
height: 2.7rem;
top: -.8rem;
left: 1.1rem;
border-top-left-radius: 1.1rem 2rem;
border-top: solid 1.1rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.2rem;
height: .8rem;
top: -1rem;
left: -2.3rem;
border-top-right-radius: 3.2rem 1.8rem;
border-right: solid 1.2rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(5):after {
content: " ";
position: absolute;
z-index: 1;
width: 3.2rem;
height: .8rem;
top: -1.5rem;
left: -1.6rem;
border-top-right-radius: 3.8rem 2.3rem;
border-right: solid 1.2rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(6) {
position: absolute;
z-index: 1;
width: 2.2rem;
height: 1.8rem;
top: -1.6rem;
left: 1.9rem;
border-bottom-right-radius: 2.2rem 1.8rem;
border-bottom: solid 1.1rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(6):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.2rem;
height: 1.8rem;
top: 0;
left: 1.5rem;
border-bottom-right-radius: 2.2rem 1.8rem;
border-bottom: solid 1.1rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk header div:nth-child(6):after {
content: " ";
position: absolute;
z-index: 1;
width: 1.7rem;
height: 1.8rem;
top: .4rem;
left: 2.6rem;
border-bottom-right-radius: 2rem 1.8rem;
border-bottom: solid 1.1rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main:before {
border-right-color: #339911;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main:after {
border-left-color: #339911;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(1) {
position: absolute;
z-index: 1;
left: 50%;
bottom: 8.3rem;
margin-left: -6.1rem;
border-style: solid;
border-color: #357622 #357622 transparent #357622;
border-width: 6rem 6.1rem 1rem 6.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: -.9rem;
border-style: solid;
border-color: #339911 #339911 transparent transparent;
border-width: 6.7rem 6.1rem 1.2rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: -.9rem;
border-style: solid;
border-color: #339911 transparent transparent #339911;
border-width: 6.7rem .2rem 1.2rem 6.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(2) {
position: absolute;
background: #357622;
z-index: 1;
width: 2.8rem;
height: 6.8rem;
left: 50%;
bottom: 2.1rem;
margin-left: -1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 3rem;
height: 1.5rem;
top: 0;
left: -.1rem;
border-style: solid;
border-color: transparent #339911 transparent #339911;
border-width: 0 1.4rem .2rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 3rem;
height: 1.5rem;
top: 1.4rem;
left: -.1rem;
border-style: solid;
border-color: transparent #339911 transparent #339911;
border-width: .2rem 1.4rem .2rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(3) {
position: absolute;
z-index: 1;
width: 3rem;
height: 1.5rem;
left: 50%;
bottom: 4.6rem;
margin-left: -1.5rem;
border-style: solid;
border-color: transparent #339911 transparent #339911;
border-width: .2rem 1.4rem .2rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 3rem;
height: 1.5rem;
top: 1.2rem;
left: -1.4rem;
border-style: solid;
border-color: transparent #339911 transparent #339911;
border-width: .2rem 1.4rem .2rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.hulk main div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
width: 2.8rem;
height: 1.5rem;
top: 2.6rem;
left: -1.3rem;
border-style: solid;
border-color: transparent #339911 transparent #339911;
border-width: .2rem 1.4rem .2rem 1.4rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header {
background: #ffaa77;
width: 6rem;
height: 6.2rem;
top: 4rem;
left: 50%;
margin-left: -3rem;
border-top-left-radius: 2.7rem;
border-top-right-radius: 2.7rem;
border-top: solid 1.2rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header:before {
content: " ";
position: absolute;
background: #ffaa77;
z-index: -1;
width: 7rem;
height: 1.6rem;
top: 2rem;
left: 50%;
margin-left: -3.5rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header:after {
content: " ";
position: absolute;
z-index: 1;
width: 6rem;
left: 0;
bottom: 0;
margin-bottom: -2rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 2rem 2rem 0 2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header div:nth-child(1) {
position: absolute;
background: #1d1216;
z-index: 1;
width: 2.6rem;
height: .6rem;
left: .6rem;
border-bottom-left-radius: 1.3rem .6rem;
border-bottom-right-radius: 1.3rem .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: -1;
width: 1rem;
height: 1.6rem;
top: -.7rem;
left: 2.3rem;
border-right: solid .9rem #1d1216;
border-bottom-right-radius: 1rem 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.3rem;
height: .7rem;
top: 1.8rem;
right: 50%;
margin-right: .3rem;
border-top-right-radius: 2.2rem .5rem;
border-top: solid .3rem black;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
top: 1.8rem;
left: 50%;
margin-left: -2.9rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: .5rem .6rem 0 .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.3rem;
height: .7rem;
top: 1.8rem;
left: 50%;
margin-left: .3rem;
border-top-left-radius: 2.2rem .5rem;
border-top: solid .3rem black;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
top: 1.8rem;
right: 50%;
margin-right: -2.9rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: .5rem .3rem 0 .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main:before {
border-top-width: 4.2rem;
border-right-color: #0d50c4;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main:after {
border-top-width: 4.2rem;
border-left-color: #0d50c4;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(1) {
position: absolute;
z-index: 1;
width: 22.6rem;
left: 50%;
bottom: 14.3rem;
margin-left: -11.3rem;
border-style: solid;
border-color: transparent transparent #ff1800 transparent;
border-width: 0 5.5rem 3.1rem 5.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(2) {
position: absolute;
z-index: 1;
width: 10.4rem;
left: 50%;
bottom: 10.2rem;
margin-left: -5.2rem;
border-style: solid;
border-color: transparent transparent #ff1800 transparent;
border-width: 0 1.8rem 2.1rem 1.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
top: 2.1rem;
left: 50%;
margin-left: -5.2rem;
border-style: solid;
border-color: #ff1800 transparent transparent transparent;
border-width: 5.5rem 5.2rem 0 5.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
top: 2.1rem;
left: 50%;
margin-left: -4.5rem;
border-style: solid;
border-color: #ffee00 transparent transparent transparent;
border-width: 4.6rem 4.5rem 0 4.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(3) {
position: absolute;
z-index: 1;
width: 9rem;
left: 50%;
bottom: 10.2rem;
margin-left: -4.5rem;
border-style: solid;
border-color: transparent transparent #ffee00 transparent;
border-width: 0 1.4rem 1.6rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 8rem;
top: -5.6rem;
left: 50%;
margin-left: -4rem;
border-style: solid;
border-color: #ff6f3a transparent transparent transparent;
border-width: 3.1rem 2rem 0 2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(3):after {
content: "S";
position: absolute;
z-index: 1;
top: -1.3rem;
left: 1rem;
font-size: 8rem;
font-family: serif;
font-weight: bold;
color: #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(4) {
position: absolute;
z-index: 1;
top: -18.1rem;
left: 50%;
margin-left: -5.2rem;
border-style: solid;
border-color: transparent transparent #ff1800 transparent;
border-width: 0 5.2rem .7rem 5.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
top: -15.7rem;
left: 50%;
margin-left: -11.3rem;
border-style: solid;
border-color: transparent transparent #0d50c4 transparent;
border-width: 0 3.1rem 1.4rem 8.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.superman main div:nth-child(5):after {
content: " ";
position: absolute;
z-index: 1;
top: -15.7rem;
right: 50%;
margin-right: -11.3rem;
border-style: solid;
border-color: transparent transparent #0d50c4 transparent;
border-width: 0 8.2rem 1.4rem 3.1rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor header {
position: absolute;
background: #ffaa77;
width: 5.8rem;
height: 6.6rem;
top: 3.2rem;
left: 50%;
margin-left: -2.9rem;
border-top-left-radius: 2.9rem;
border-top-right-radius: 2.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor header:before {
content: " ";
position: absolute;
z-index: 1;
width: 5.8rem;
left: 0;
bottom: 0;
margin-bottom: -2rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 2rem 1.6rem 0 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor header:after {
content: " ";
position: absolute;
background: #ffaa77;
z-index: -1;
width: 6.8rem;
height: 1.6rem;
top: 3.6rem;
left: 50%;
margin-left: -3.4rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.3rem;
height: .7rem;
top: 3.4rem;
right: 50%;
margin-right: .3rem;
border-top-right-radius: 2.2rem .5rem;
border-top: solid .3rem black;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
top: 3.4rem;
left: 50%;
margin-left: -2.9rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: .5rem .6rem 0 .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor header div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.3rem;
height: .7rem;
top: 3.4rem;
left: 50%;
margin-left: .3rem;
border-top-left-radius: 2.2rem .5rem;
border-top: solid .3rem black;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
top: 3.4rem;
right: 50%;
margin-right: -2.9rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: .5rem .3rem 0 .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main:before {
border-right-color: #4b1058;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main:after {
border-left-color: #4b1058;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main div:nth-child(1) {
position: absolute;
z-index: 2;
width: 0;
left: 50%;
bottom: 0;
margin-left: -2.9rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 17.6rem 2.9rem 0 2.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 0;
left: 50%;
bottom: 0;
margin-left: -1.4rem;
border-style: solid;
border-color: #829d83 transparent transparent transparent;
border-width: 8.3rem 1.4rem 0 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 0;
left: 50%;
bottom: 12.3rem;
margin-left: 2.8rem;
border-style: solid;
border-color: #33881b transparent transparent #33881b;
border-width: .4rem .4rem 0 2.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main div:nth-child(2) {
position: absolute;
z-index: 2;
width: 0;
left: 50%;
bottom: 14.3rem;
margin-left: -.8rem;
border-style: solid;
border-color: #33881b transparent transparent transparent;
border-width: .8rem .8rem 0 .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 1.6rem;
top: -.2rem;
left: 50%;
margin-left: -.8rem;
border-style: solid;
border-color: transparent transparent #33881b transparent;
border-width: 0 .6rem 6.8rem .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.lex-luthor main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 1.6rem;
top: 6.6rem;
left: 50%;
margin-left: -.8rem;
border-style: solid;
border-color: #33881b transparent transparent transparent;
border-width: .8rem .8rem 0 .8rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header {
position: absolute;
background: #0d50c4;
width: 6rem;
height: 7rem;
top: 2.8rem;
left: 50%;
margin-left: -3rem;
border-top-left-radius: 3rem 3.7rem;
border-top-right-radius: 3rem 3.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header:before {
content: " ";
position: absolute;
background: #ffaa77;
z-index: -1;
width: 7rem;
height: 1.6rem;
top: 4.1rem;
left: 50%;
margin-left: -3.5rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header:after {
content: " ";
position: absolute;
z-index: -1;
width: 7.4rem;
height: 3rem;
top: 1.2rem;
left: 50%;
margin-left: -3.7rem;
border-bottom-left-radius: 2.1rem;
border-bottom-right-radius: 2.1rem;
border-bottom: solid 1.3rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(1) {
position: absolute;
z-index: 1;
width: 1.4rem;
height: 1.6rem;
top: 1.5rem;
left: 50%;
margin-left: -.7rem;
border-top: solid 1rem #fff;
border-bottom: solid .2rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
top: -1rem;
left: -.9rem;
border-style: solid;
border-color: transparent #fff #fff transparent;
border-width: 0 .2rem 2.2rem 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
top: -1rem;
right: -.9rem;
border-style: solid;
border-color: transparent transparent #fff #fff;
border-width: 0 1rem 2.2rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(2):before {
content: " ";
position: absolute;
background: #ffaa77;
z-index: 1;
width: 1.9rem;
height: 1.2rem;
top: 4.5rem;
left: .7rem;
border-top-left-radius: .4rem .3rem;
border-top-right-radius: 1.5rem 1rem;
border-bottom-left-radius: .9rem .6rem;
border-bottom-right-radius: 1rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(2):after {
content: " ";
position: absolute;
background: #ffaa77;
z-index: 1;
width: 1.9rem;
height: 1.2rem;
top: 4.5rem;
right: .7rem;
border-top-left-radius: 1.5rem 1rem;
border-top-right-radius: .4rem .3rem;
border-bottom-left-radius: 1rem .2rem;
border-bottom-right-radius: .9rem .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(3) {
position: absolute;
z-index: 1;
width: 5rem;
left: 50%;
bottom: -2.3rem;
margin-left: -2.5rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 1.4rem 1.6rem 0 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 5rem;
top: -3.3rem;
left: 50%;
margin-left: -2.5rem;
border-style: solid;
border-color: transparent transparent #ffaa77 transparent;
border-width: 0 .2rem 1.9rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
width: 5rem;
top: -3.6rem;
left: 50%;
margin-left: -2.5rem;
border-style: solid;
border-color: #0d50c4 #0d50c4 transparent #0d50c4;
border-width: .6rem 2.3rem .6rem 2.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main:before {
border-right-color: #0d50c4;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main:after {
border-left-color: #0d50c4;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(1) {
position: absolute;
z-index: 1;
left: 50%;
bottom: 0;
margin-left: -4.2rem;
border-style: solid;
border-color: #ff1800 transparent transparent transparent;
border-width: 5.4rem 4.2rem 0 4.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
left: -3rem;
bottom: 1.2rem;
border-style: solid;
border-color: #fff #fff transparent transparent;
border-width: 1.6rem 2rem 2.6rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
right: -3rem;
bottom: 1.2rem;
border-style: solid;
border-color: #fff transparent transparent #fff;
border-width: 1.6rem 0 2.6rem 2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(2) {
position: absolute;
background: #fff;
z-index: 1;
width: 8.2rem;
height: 8.2rem;
left: 50%;
bottom: 6.2rem;
margin-left: -4.1rem;
overflow: hidden;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 0;
margin-left: -2.6rem;
border-style: solid;
border-color: transparent transparent #0d50c4 transparent;
border-width: 0 2.6rem 1.4rem 2.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
margin-bottom: -4rem;
border-style: solid;
border-color: transparent #0d50c4 transparent transparent;
border-width: 2rem 2.1rem 6.7rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(3) {
position: absolute;
z-index: 1;
width: 8.2rem;
height: 8.2rem;
left: 50%;
bottom: 6.2rem;
margin-left: -4.1rem;
overflow: hidden;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
margin-bottom: -4rem;
border-style: solid;
border-color: transparent transparent transparent #0d50c4;
border-width: 2rem 0 6.7rem 2.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
top: 0;
left: 0;
border-style: solid;
border-color: #0d50c4 transparent transparent #0d50c4;
border-width: 2.8rem 1.3rem .5rem 2.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(4) {
position: absolute;
z-index: 1;
width: 8.2rem;
height: 8.2rem;
left: 50%;
bottom: 6.2rem;
margin-left: -4.1rem;
overflow: hidden;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.captain-america main div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
top: 0;
right: 0;
border-style: solid;
border-color: #0d50c4 #0d50c4 transparent transparent;
border-width: 2.8rem 2.7rem .5rem 1.3rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header {
background: #cc1100;
width: 5.8rem;
height: 6.3rem;
top: 3rem;
left: 50%;
margin-left: -2.9rem;
border-top-left-radius: 2.9rem;
border-top-right-radius: 2.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header:before {
content: " ";
position: absolute;
z-index: 1;
width: 6rem;
top: 100%;
left: 50%;
margin-left: -3rem;
border-style: solid;
border-color: #cc1100 transparent transparent transparent;
border-width: 2.2rem 2.2rem 0 2.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header:after {
content: " ";
position: absolute;
z-index: 1;
width: 6rem;
top: 100%;
left: 50%;
margin-top: -.5rem;
margin-left: -3rem;
border-style: solid;
border-color: transparent transparent #cc1100 transparent;
border-width: 0 .1rem .5rem .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(1) {
position: absolute;
background: #cc1100;
z-index: 1;
width: 6.8rem;
height: 2.5rem;
top: 1.5rem;
left: 50%;
margin-left: -3.4rem;
border-top-left-radius: 1.8rem 2.2rem;
border-top-right-radius: 1.8rem 2.2rem;
border-bottom-left-radius: .4rem .3rem;
border-bottom-right-radius: .4rem .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(2):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.9rem;
height: .9rem;
top: 4.3rem;
left: .7rem;
border-style: solid;
border-color: #000;
border-width: 0 .4rem .4rem .6rem;
border-top-right-radius: 1.9rem .5rem;
border-bottom-left-radius: 1.3rem .9rem;
border-bottom-right-radius: .6rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(2):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.9rem;
height: .9rem;
top: 4.3rem;
right: .7rem;
border-style: solid;
border-color: #000;
border-width: 0 .6rem .4rem .4rem;
border-top-left-radius: 1.9rem .5rem;
border-bottom-left-radius: .6rem .4rem;
border-bottom-right-radius: 1.3rem .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(3) {
position: absolute;
z-index: 2;
width: 4.6rem;
top: 5.5rem;
left: 50%;
margin-left: -2.3rem;
border-style: solid;
border-color: #550000 transparent transparent transparent;
border-width: .6rem .9rem 0 .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 4.6rem;
top: -.7rem;
left: 50%;
margin-left: -2.3rem;
border-style: solid;
border-color: #cc1100 transparent transparent transparent;
border-width: .7rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
height: 1.4rem;
top: -.1rem;
left: 50%;
margin-left: -1.7rem;
border-style: solid;
border-color: transparent #550000 transparent #550000;
border-width: 0 .1rem 0 .1rem;
border-top-left-radius: .5rem .9rem;
border-top-right-radius: .5rem .9rem;
border-bottom-left-radius: .3rem .5rem;
border-bottom-right-radius: .3rem .5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(4) {
position: absolute;
z-index: 2;
top: 5.7rem;
left: 50%;
margin-left: -.4rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 .4rem .7rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull header div:nth-child(4):before {
content: " ";
position: absolute;
background: #cc1100;
z-index: 1;
width: .8rem;
height: .2rem;
left: -.4rem;
bottom: -.8rem;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main:before {
border-right-color: #550000;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main:after {
border-left-color: #550000;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(1) {
position: absolute;
z-index: 1;
width: 8.4rem;
height: 2.5rem;
left: 50%;
bottom: 17.3rem;
margin-left: -4.2rem;
border-style: solid;
border-color: #550000 transparent transparent transparent;
border-width: 2.5rem .2rem 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(1):before {
content: " ";
position: absolute;
background: #cc1100;
z-index: 1;
width: 3.2rem;
height: .6rem;
top: 1.4rem;
left: -5.7rem;
transform: rotateZ(-20deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(1):after {
content: " ";
position: absolute;
background: #cc1100;
z-index: 1;
width: 3.2rem;
height: .6rem;
top: 1.4rem;
right: -5.7rem;
transform: rotateZ(20deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(2):before {
content: " ";
position: absolute;
background: #829d83;
z-index: 1;
width: .8rem;
height: .8rem;
left: 50%;
bottom: 14.5rem;
margin-left: -4.5rem;
border-radius: 50%;
box-shadow: 0 7.2rem 0 0 #829d83, 0 4.8rem 0 0 #829d83, 0 2.4rem 0 0 #829d83;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(2):after {
content: " ";
position: absolute;
background: #829d83;
z-index: 1;
width: .8rem;
height: .8rem;
right: 50%;
bottom: 14.5rem;
margin-right: -4.5rem;
border-radius: 50%;
box-shadow: 0 7.2rem 0 0 #829d83, 0 4.8rem 0 0 #829d83, 0 2.4rem 0 0 #829d83;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(3) {
position: absolute;
background: #000;
z-index: 1;
width: 4.6rem;
height: 4.6rem;
left: 50%;
bottom: 7rem;
margin-left: -2.3rem;
border-radius: 50%;
border: solid .3rem #cc1100;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(3):before {
content: " ";
position: absolute;
background: #cc1100;
z-index: 1;
width: 1.6rem;
height: 2rem;
top: .6rem;
left: 50%;
margin-left: -.8rem;
border-top-left-radius: .8rem .5rem;
border-top-right-radius: .8rem .5rem;
border-bottom-left-radius: .7rem 1.5rem;
border-bottom-right-radius: .7rem 1.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(3):after {
content: " ";
position: absolute;
background: #cc1100;
z-index: 1;
width: 1rem;
height: .2rem;
top: 1.8rem;
left: 50%;
margin-left: -.5rem;
border-left: solid .2rem #000;
border-right: solid .2rem #000;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(4):before {
content: "?";
position: absolute;
z-index: 1;
left: 50%;
bottom: 8rem;
margin-left: -1.5rem;
font-size: 2.2rem;
font-family: sans-serif;
font-weight: bold;
color: #cc1100;
transform: rotateZ(-66deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(4):after {
content: "?";
position: absolute;
z-index: 1;
right: 50%;
bottom: 8rem;
margin-right: -1.4rem;
font-size: 2.2rem;
font-family: sans-serif;
font-weight: bold;
color: #cc1100;
transform: rotateZ(66deg) rotateY(-180deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(5):before {
content: "?";
position: absolute;
z-index: 1;
left: 50%;
bottom: 7.7rem;
margin-left: -1.4rem;
font-size: 2.2rem;
font-family: sans-serif;
font-weight: bold;
color: #cc1100;
transform: rotateZ(-146deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(5):after {
content: "?";
position: absolute;
z-index: 1;
right: 50%;
bottom: 7.7rem;
margin-right: -1.4rem;
font-size: 2.2rem;
font-family: sans-serif;
font-weight: bold;
color: #cc1100;
transform: rotateZ(146deg) rotateY(-180deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(6):before {
content: "?";
position: absolute;
z-index: 1;
left: 50%;
bottom: 7.5rem;
margin-left: -1.2rem;
font-size: 2.2rem;
font-family: sans-serif;
font-weight: bold;
color: #cc1100;
transform: rotateZ(-196deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.red-skull main div:nth-child(6):after {
content: "?";
position: absolute;
z-index: 1;
right: 50%;
bottom: 7.5rem;
margin-right: -1.2rem;
font-size: 2.2rem;
font-family: sans-serif;
font-weight: bold;
color: #cc1100;
transform: rotateZ(196deg) rotateY(-180deg);
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header {
background: #d5282b;
width: 5.8rem;
height: 6.8rem;
top: 2.9rem;
left: 50%;
margin-left: -2.9rem;
border-top-left-radius: 2.9rem;
border-top-right-radius: 2.9rem;
border-bottom-left-radius: .3rem 1.9rem;
border-bottom-right-radius: .3rem 1.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header:before {
content: " ";
position: absolute;
z-index: 1;
width: 5.8rem;
top: 100%;
left: 50%;
margin-left: -2.9rem;
border-style: solid;
border-color: #bb1100 transparent transparent transparent;
border-width: 2.4rem 1.6rem 0 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header:after {
content: " ";
position: absolute;
z-index: 1;
width: 5.2rem;
top: 100%;
left: 50%;
margin-left: -2.6rem;
border-style: solid;
border-color: #d5282b transparent transparent transparent;
border-width: 2.1rem 1.6rem 0 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(1) {
position: absolute;
z-index: 2;
width: 5rem;
height: 5.6rem;
top: 1.6rem;
left: 50%;
margin-left: -2.5rem;
border: solid .1rem #bb1100;
border-radius: 2.6rem / 3rem;
box-shadow: inset 0 0 0 .8rem #d5282b, inset 0 0 0 .9rem #bb1100, inset 0 0 0 1.8rem #d5282b, inset 0 0 0 1.9rem #bb1100;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(2):before {
content: " ";
position: absolute;
background: #bb1100;
z-index: 3;
width: .1rem;
height: 8.9rem;
left: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(2):after {
content: " ";
position: absolute;
background: #bb1100;
z-index: 3;
width: 5.8rem;
height: .1rem;
top: 50%;
margin-top: .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(3):before {
content: " ";
position: absolute;
background: #bb1100;
z-index: 3;
width: 7.4rem;
height: .1rem;
top: 50%;
margin-top: .9rem;
margin-left: -.8rem;
transform-origin: 50% 50% 0;
transform: rotateZ(-45deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(3):after {
content: " ";
position: absolute;
background: #bb1100;
z-index: 3;
width: 7.4rem;
height: .1rem;
top: 50%;
margin-top: .9rem;
margin-left: -.8rem;
transform-origin: 50% 50% 0;
transform: rotateZ(45deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(4) {
position: absolute;
z-index: 3;
width: 4rem;
height: 3rem;
top: 2.3rem;
left: -.2rem;
border-left: solid 1.6rem #000;
border-top-left-radius: 2.7rem 2.2rem;
transform: rotateZ(-50deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.2rem;
height: 2.6rem;
top: .2rem;
left: -1.4rem;
border-left: solid 1.2rem #fff;
border-top-left-radius: 2rem 2.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(5) {
position: absolute;
z-index: 3;
width: 4rem;
height: 3rem;
top: 2.3rem;
right: -.2rem;
border-right: solid 1.6rem #000;
border-top-right-radius: 2.7rem 2.2rem;
transform: rotateZ(50deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman header div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.2rem;
height: 2.6rem;
top: .2rem;
right: -1.4rem;
border-right: solid 1.2rem #fff;
border-top-right-radius: 2rem 2.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main:before {
border-right-color: #d5282b;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main:after {
border-left-color: #d5282b;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(1) {
position: absolute;
z-index: 1;
height: 187px;
left: 50%;
bottom: .1rem;
border-left: solid .1rem #bb1100;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.6rem;
height: 183px;
left: 50%;
bottom: .3rem;
margin-left: -1.8rem;
border-left: solid .1rem #bb1100;
border-right: solid .1rem #bb1100;
border-top-left-radius: 1.8rem 7.9rem;
border-top-right-radius: 1.8rem 7.9rem;
border-bottom-left-radius: 1.8rem 10.9rem;
border-bottom-right-radius: 1.8rem 10.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 7.2rem;
height: 146px;
left: 50%;
bottom: 3.2rem;
margin-left: -3.6rem;
border-left: solid .1rem #bb1100;
border-right: solid .1rem #bb1100;
border-top-left-radius: 1.8rem 7.9rem;
border-top-right-radius: 1.8rem 7.9rem;
border-bottom-left-radius: 1.8rem 10.9rem;
border-bottom-right-radius: 1.8rem 10.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(2) {
position: absolute;
z-index: 1;
width: 10.8rem;
height: 113px;
left: 50%;
bottom: 5.8rem;
margin-left: -5.4rem;
border-left: solid .1rem #bb1100;
border-right: solid .1rem #bb1100;
border-top-left-radius: 1.8rem 7.9rem;
border-top-right-radius: 1.8rem 7.9rem;
border-bottom-left-radius: 1.8rem 10.9rem;
border-bottom-right-radius: 1.8rem 10.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 14.4rem;
height: 78px;
left: 50%;
bottom: 26px;
margin-left: -7.2rem;
border-left: solid .1rem #bb1100;
border-right: solid .1rem #bb1100;
border-top-left-radius: 1.8rem 7.9rem;
border-top-right-radius: 1.8rem 7.9rem;
border-bottom-left-radius: 1.8rem 10.9rem;
border-bottom-right-radius: 1.8rem 10.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 18rem;
height: 44px;
left: 50%;
bottom: 52px;
margin-left: -9rem;
border-left: solid .1rem #bb1100;
border-right: solid .1rem #bb1100;
border-top-left-radius: 1.8rem 7.9rem;
border-top-right-radius: 1.8rem 7.9rem;
border-bottom-left-radius: 1.8rem 10.9rem;
border-bottom-right-radius: 1.8rem 10.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(3) {
content: " ";
position: absolute;
z-index: 1;
width: 21.6rem;
height: 8px;
left: 50%;
bottom: 13.8rem;
margin-left: -10.8rem;
border-left: solid .1rem #bb1100;
border-right: solid .1rem #bb1100;
border-top-left-radius: 1.8rem 7.9rem;
border-top-right-radius: 1.8rem 7.9rem;
border-bottom-left-radius: 1.8rem 10.9rem;
border-bottom-right-radius: 1.8rem 10.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(3):before {
content: " ";
position: absolute;
width: 1.8rem;
height: .3rem;
top: -.1rem;
left: 0;
border-bottom-left-radius: .9rem .3rem;
border-bottom-right-radius: .9rem .3rem;
box-shadow: 9.8rem 13.2rem 0 0 #d5282b, 9.8rem 13.3rem 0 0 #bb1100, 9rem 11.4rem 0 0 #d5282b, 9rem 11.5rem 0 0 #bb1100, 10.6rem 11.4rem 0 0 #d5282b, 10.6rem 11.5rem 0 0 #bb1100, 9rem 9.6rem 0 0 #d5282b, 9rem 9.7rem 0 0 #bb1100, 10.6rem 9.6rem 0 0 #d5282b, 10.6rem 9.7rem 0 0 #bb1100, 9rem 7.8rem 0 0 #d5282b, 9rem 7.9rem 0 0 #bb1100, 10.6rem 7.8rem 0 0 #d5282b, 10.6rem 7.9rem 0 0 #bb1100, 7.4rem 7.7rem 0 0 #d5282b, 7.4rem 7.8rem 0 0 #bb1100, 9rem 7.8rem 0 0 #d5282b, 9rem 7.9rem 0 0 #bb1100, 10.6rem 7.8rem 0 0 #d5282b, 10.6rem 7.9rem 0 0 #bb1100, 12.4rem 7.7rem 0 0 #d5282b, 12.4rem 7.8rem 0 0 #bb1100, 5.5rem 5.8rem 0 0 #d5282b, 5.5rem 5.9rem 0 0 #bb1100, 7.4rem 5.9rem 0 0 #d5282b, 7.4rem 6rem 0 0 #bb1100, 9rem 6rem 0 0 #d5282b, 9rem 6.1rem 0 0 #bb1100, 10.6rem 6rem 0 0 #d5282b, 10.6rem 6.1rem 0 0 #bb1100, 12.4rem 5.9rem 0 0 #d5282b, 12.4rem 6rem 0 0 #bb1100, 14.2rem 5.8rem 0 0 #d5282b, 14.2rem 5.9rem 0 0 #bb1100, 3.6rem 3.9rem 0 0 #d5282b, 3.6rem 4rem 0 0 #bb1100, 5.5rem 4rem 0 0 #d5282b, 5.5rem 4.1rem 0 0 #bb1100, 7.4rem 4.1rem 0 0 #d5282b, 7.4rem 4.2rem 0 0 #bb1100, 9rem 4.2rem 0 0 #d5282b, 9rem 4.3rem 0 0 #bb1100, 10.6rem 4.2rem 0 0 #d5282b, 10.6rem 4.3rem 0 0 #bb1100, 12.4rem 4.1rem 0 0 #d5282b, 12.4rem 4.2rem 0 0 #bb1100, 14.2rem 4rem 0 0 #d5282b, 14.2rem 4.1rem 0 0 #bb1100, 16rem 3.9rem 0 0 #d5282b, 16rem 4rem 0 0 #bb1100, 1.8rem 2rem 0 0 #d5282b, 1.8rem 2.1rem 0 0 #bb1100, 3.6rem 2.1rem 0 0 #d5282b, 3.6rem 2.2rem 0 0 #bb1100, 5.5rem 2.2rem 0 0 #d5282b, 5.5rem 2.3rem 0 0 #bb1100, 7.4rem 2.3rem 0 0 #d5282b, 7.4rem 2.4rem 0 0 #bb1100, 9rem 2.4rem 0 0 #d5282b, 9rem 2.5rem 0 0 #bb1100, 10.6rem 2.4rem 0 0 #d5282b, 10.6rem 2.5rem 0 0 #bb1100, 12.4rem 2.3rem 0 0 #d5282b, 12.4rem 2.4rem 0 0 #bb1100, 14.2rem 2.2rem 0 0 #d5282b, 14.2rem 2.3rem 0 0 #bb1100, 16rem 2.1rem 0 0 #d5282b, 16rem 2.2rem 0 0 #bb1100, 17.8rem 2rem 0 0 #d5282b, 17.8rem 2.1rem 0 0 #bb1100, 0 .1rem 0 0 #d5282b, 0 .2rem 0 0 #bb1100, 1.8rem .2rem 0 0 #d5282b, 1.8rem .3rem 0 0 #bb1100, 3.6rem .3rem 0 0 #d5282b, 3.6rem .4rem 0 0 #bb1100, 5.5rem .4rem 0 0 #d5282b, 5.5rem .5rem 0 0 #bb1100, 7.4rem .5rem 0 0 #d5282b, 7.4rem .6rem 0 0 #bb1100, 9rem .6rem 0 0 #d5282b, 9rem .7rem 0 0 #bb1100, 10.6rem .6rem 0 0 #d5282b, 10.6rem .7rem 0 0 #bb1100, 12.4rem .5rem 0 0 #d5282b, 12.4rem .6rem 0 0 #bb1100, 14.2rem .4rem 0 0 #d5282b, 14.2rem .5rem 0 0 #bb1100, 16rem .3rem 0 0 #d5282b, 16rem .4rem 0 0 #bb1100, 17.8rem .2rem 0 0 #d5282b, 17.8rem .3rem 0 0 #bb1100, 19.4rem .1rem 0 0 #d5282b, 19.4rem .2rem 0 0 #bb1100, 4rem -1.5rem 0 0 #d5282b, 4rem -1.4rem 0 0 #bb1100, 5.7rem -1.4rem 0 0 #d5282b, 5.7rem -1.3rem 0 0 #bb1100, 7.6rem -1.3rem 0 0 #d5282b, 7.6rem -1.2rem 0 0 #bb1100, 9.2rem -1.2rem 0 0 #d5282b, 9.2rem -1.1rem 0 0 #bb1100, 10.3rem -1.2rem 0 0 #d5282b, 10.3rem -1.1rem 0 0 #bb1100, 12.2rem -1.3rem 0 0 #d5282b, 12.2rem -1.2rem 0 0 #bb1100, 14rem -1.4rem 0 0 #d5282b, 14rem -1.3rem 0 0 #bb1100, 15.6rem -1.5rem 0 0 #d5282b, 15.6rem -1.4rem 0 0 #bb1100;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(4) {
position: absolute;
overflow: hidden;
z-index: 1;
width: 14.2rem;
height: 28.2rem;
left: 50%;
bottom: -13.8rem;
margin-left: -14.1rem;
border-top-right-radius: 10rem 18rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
right: 0;
border-style: solid;
border-color: #0d50c4 #0d50c4 transparent transparent;
border-width: 7.3rem 5.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(5) {
position: absolute;
overflow: hidden;
z-index: 1;
width: 14.2rem;
height: 28.2rem;
right: 50%;
bottom: -13.8rem;
margin-right: -14.1rem;
border-top-left-radius: 10rem 18rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
border-style: solid;
border-color: #0d50c4 transparent transparent #0d50c4;
border-width: 7.3rem 5.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(6) {
position: absolute;
background: #000;
z-index: 1;
width: 1.2rem;
height: .7rem;
left: 50%;
bottom: 11.3rem;
margin-left: -.6rem;
border-radius: .3rem .3rem .2rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(6):before {
content: " ";
position: absolute;
background: #000;
z-index: 1;
width: .8rem;
height: 2.1rem;
top: 100%;
left: 50%;
margin-left: -.4rem;
border-top-left-radius: .1rem .7rem;
border-top-right-radius: .1rem .7rem;
border-bottom-left-radius: .4rem 1.4rem;
border-bottom-right-radius: .4rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(6):after {
content: " ";
position: absolute;
z-index: 1;
width: 3rem;
height: 2rem;
top: -1.7rem;
left: 50%;
margin-left: -1.5rem;
border-left: solid .1rem #000;
border-right: solid .1rem #000;
border-bottom: solid .2rem #000;
border-top-left-radius: .5rem 1.2rem;
border-top-right-radius: .5rem 1.2rem;
border-bottom-left-radius: 1.5rem .4rem;
border-bottom-right-radius: 1.5rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(7) {
position: absolute;
z-index: 1;
width: 4rem;
height: 2.6rem;
left: 50%;
bottom: 11.6rem;
margin-left: -2rem;
border-left: solid .1rem #000;
border-right: solid .1rem #000;
border-bottom: solid .2rem #000;
border-top-left-radius: .7rem 1.4rem;
border-top-right-radius: .7rem 1.4rem;
border-bottom-left-radius: 1.7rem .6rem;
border-bottom-right-radius: 1.7rem .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(7):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.6rem;
height: 3.3rem;
top: 100%;
left: 50%;
margin-top: .1rem;
margin-left: -1.8rem;
border-top: solid .2rem #000;
border-left: solid .1rem #000;
border-right: solid .1rem #000;
border-top-left-radius: 1.7rem .6rem;
border-top-right-radius: 1.7rem .6rem;
border-bottom-left-radius: .4rem 1.4rem;
border-bottom-right-radius: .4rem 1.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.spiderman main div:nth-child(7):after {
content: " ";
position: absolute;
z-index: 1;
width: 2.6rem;
height: 3.9rem;
top: 100%;
left: 50%;
margin-top: .1rem;
margin-left: -1.3rem;
border-top: solid .2rem #000;
border-left: solid .1rem #000;
border-right: solid .1rem #000;
border-top-left-radius: 1.7rem .6rem;
border-top-right-radius: 1.7rem .6rem;
border-bottom-left-radius: .9rem 2.6rem;
border-bottom-right-radius: .9rem 2.6rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header {
position: absolute;
background: #2d0049;
width: 5.8rem;
height: 7.5rem;
top: 3rem;
left: 50%;
margin-left: -2.9rem;
border-top-left-radius: 2.9rem 2.9rem;
border-top-right-radius: 2.9rem 2.9rem;
border-bottom-left-radius: .4rem 3.9rem;
border-bottom-right-radius: .4rem 3.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(1) {
position: absolute;
background: #fff;
z-index: 1;
width: 1.5rem;
height: 1.4rem;
top: 2.1rem;
left: .2rem;
border-top-left-radius: .4rem 1rem;
border-top-right-radius: 1.2rem 1.5rem;
border-bottom-left-radius: 1.2rem .4rem;
transform: rotateZ(-3deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(1):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 2rem;
height: 2rem;
top: 1.2rem;
border-top-left-radius: .4rem .9rem;
border-top-right-radius: 1rem 1.3rem;
border-bottom-left-radius: 1.6rem .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 1.9rem;
height: .9rem;
top: 2.8rem;
left: 1.3rem;
border-left: solid .7rem #fff;
border-bottom-left-radius: 50% 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(2) {
position: absolute;
background: #fff;
z-index: 1;
width: 1.5rem;
height: 1.4rem;
top: 2.1rem;
right: .2rem;
border-top-left-radius: 1.2rem 1.5rem;
border-top-right-radius: .4rem 1rem;
border-bottom-right-radius: 1.2rem .4rem;
transform: rotateZ(3deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(2):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 2rem;
height: 2rem;
top: 1.2rem;
right: 0;
border-top-left-radius: 1rem 1.3rem;
border-top-right-radius: .4rem .9rem;
border-bottom-right-radius: 1.6rem .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 1.9rem;
height: .9rem;
top: 2.8rem;
right: 1.3rem;
border-right: solid .7rem #fff;
border-bottom-right-radius: 50% 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.5rem;
left: 50%;
margin-left: -.3rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.6rem .1rem 0 .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.5rem;
right: 50%;
margin-right: -.3rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.6rem .1rem 0 .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.6rem;
left: 50%;
margin-left: -.5rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.3rem .2rem 0 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.6rem;
right: 50%;
margin-right: -.5rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.3rem 0 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.4rem;
left: 50%;
margin-left: -.8rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.6rem .2rem 0 .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(5):after {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.4rem;
right: 50%;
margin-right: -.8rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.6rem .1rem 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(6):before {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
left: 50%;
margin-left: -1.1rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.4rem .2rem 0 .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(6):after {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
right: 50%;
margin-right: -1.1rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.4rem .1rem 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(7):before {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
left: 50%;
margin-left: -1.3rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.2rem .2rem 0 .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(7):after {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
right: 50%;
margin-right: -1.3rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1.2rem .1rem 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(8):before {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
left: 50%;
margin-left: -1.5rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1rem .2rem 0 .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(8):after {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
right: 50%;
margin-right: -1.5rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: 1rem .1rem 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(9):before {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
left: 50%;
margin-left: -1.7rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: .8rem .2rem 0 .1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(9):after {
content: " ";
position: absolute;
z-index: 1;
width: .3rem;
top: 6.3rem;
right: 50%;
margin-right: -1.7rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: .8rem .1rem 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(10) {
position: absolute;
z-index: 1;
width: 3.4rem;
height: .3rem;
top: 8.3rem;
left: 50%;
margin-left: -1.7rem;
border-left: solid .2rem #fff;
border-right: solid .2rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(10):before {
content: " ";
position: absolute;
z-index: 1;
width: 3rem;
height: .4rem;
top: .3rem;
left: 50%;
margin-left: -1.5rem;
border-left: solid .2rem #fff;
border-right: solid .2rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(10):after {
content: " ";
position: absolute;
z-index: 1;
width: 2.6rem;
height: .3rem;
top: .7rem;
left: 50%;
margin-left: -1.3rem;
border-left: solid .3rem #fff;
border-right: solid .3rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(11) {
position: absolute;
z-index: 1;
width: 2rem;
height: .4rem;
top: 9.3rem;
left: 50%;
margin-left: -1rem;
border-left: solid .3rem #fff;
border-right: solid .3rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(11):before {
content: " ";
position: absolute;
z-index: 1;
width: 1.4rem;
height: .3rem;
top: .4rem;
left: 50%;
margin-left: -.7rem;
border-left: solid .3rem #fff;
border-right: solid .3rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(11):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: .8rem;
height: .2rem;
top: .7rem;
left: 50%;
margin-left: -.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(12) {
position: absolute;
background: #991100;
z-index: 1;
width: 1.4rem;
height: 1.4rem;
top: 8.3rem;
left: 50%;
margin-left: -.7rem;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(12):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.4rem;
height: 2.7rem;
top: .7rem;
border-left: solid 1.4rem #991100;
border-bottom: solid .8rem #991100;
border-bottom-left-radius: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom header div:nth-child(12):after {
content: " ";
position: absolute;
z-index: 1;
width: 1rem;
height: 1.6rem;
top: 2.6rem;
left: 2.4rem;
border-top: solid .8rem #991100;
border-top-right-radius: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main:before {
border-right-color: #2d0049;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main:after {
border-left-color: #2d0049;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(1) {
position: absolute;
background: #fff;
z-index: 1;
width: 3.8rem;
height: 5.6rem;
left: 50%;
bottom: 1.6rem;
margin-left: -1.9rem;
border-bottom-left-radius: 1rem 5.6rem;
border-bottom-right-radius: 1rem 5.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.8rem;
top: -1.3rem;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0 1.2rem 1.3rem 1.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(1):after {
content: " ";
position: absolute;
background: #2d0049;
z-index: 1;
width: 1.8rem;
height: .5rem;
left: 50%;
bottom: 0;
margin-left: -.9rem;
border-top-left-radius: .9rem .5rem;
border-top-right-radius: .9rem .5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(2) {
position: absolute;
background: #fff;
z-index: 1;
width: 2.4rem;
height: 3rem;
left: 50%;
bottom: 7.8rem;
margin-left: -1.2rem;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 2rem;
height: 1.2rem;
top: -.4rem;
left: 50%;
margin-left: -1rem;
border-left: solid .4rem #fff;
border-right: solid .4rem #fff;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(3) {
position: absolute;
z-index: 1;
width: 3.6rem;
height: 3.1rem;
left: 50%;
bottom: 5.9rem;
margin-left: -.5rem;
border-style: solid;
border-color: #fff #fff transparent transparent;
border-width: .4rem .6rem 0 0;
border-top-right-radius: 1rem 3.1rem;
transform: rotateZ(-23deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
height: 1.2rem;
top: 1.4rem;
left: 3.2rem;
border-bottom: solid .7rem #fff;
border-bottom-right-radius: 3.3rem 1.2rem;
transform: rotateZ(-4deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(3):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.2rem;
height: .9rem;
top: 1.7rem;
left: 5.8rem;
transform: rotateZ(61deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(4) {
position: absolute;
z-index: 1;
width: 3.6rem;
height: 3.1rem;
right: 50%;
bottom: 5.9rem;
margin-right: -.5rem;
border-style: solid;
border-color: #fff transparent transparent #fff;
border-width: .4rem 0 0 .6rem;
border-top-left-radius: 1rem 3.1rem;
transform: rotateZ(23deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
height: 1.2rem;
top: 1.4rem;
right: 3.2rem;
border-bottom: solid .7rem #fff;
border-bottom-left-radius: 3.3rem 1.2rem;
transform: rotateZ(4deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(4):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.2rem;
height: .9rem;
top: 1.7rem;
right: 5.8rem;
transform: rotateZ(-61deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(5) {
position: absolute;
z-index: 1;
width: 3.9rem;
height: 2.8rem;
left: 50%;
bottom: 6.6rem;
margin-left: -.5rem;
border-style: solid;
border-color: #fff #fff transparent transparent;
border-width: .4rem .6rem 0 0;
border-top-right-radius: 1rem 3.1rem;
transform: rotateZ(-34deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
height: 1.2rem;
top: 1.4rem;
left: 3.3rem;
border-bottom: solid .7rem #fff;
border-bottom-right-radius: 3.3rem 1.2rem;
transform: rotateZ(8deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(5):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.8rem;
height: .9rem;
top: 2.1rem;
left: 5.9rem;
transform: rotateZ(73deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(6) {
position: absolute;
z-index: 1;
width: 3.9rem;
height: 2.8rem;
right: 50%;
bottom: 6.6rem;
margin-right: -.5rem;
border-style: solid;
border-color: #fff transparent transparent #fff;
border-width: .4rem 0 0 .6rem;
border-top-left-radius: 1rem 3.1rem;
transform: rotateZ(34deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(6):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
height: 1.2rem;
top: 1.4rem;
right: 3.3rem;
border-bottom: solid .7rem #fff;
border-bottom-left-radius: 3.3rem 1.2rem;
transform: rotateZ(-8deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(6):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.8rem;
height: .9rem;
top: 2.1rem;
right: 5.9rem;
transform: rotateZ(-73deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(7) {
position: absolute;
z-index: 1;
width: 4.2rem;
height: 2.6rem;
left: 50%;
bottom: 7.3rem;
margin-left: -.6rem;
border-style: solid;
border-color: #fff #fff transparent transparent;
border-width: .4rem .6rem 0 0;
border-top-right-radius: 1.4rem 3.1rem;
transform: rotateZ(-39deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(7):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
height: 1.2rem;
top: 1.2rem;
left: 3.8rem;
border-bottom: solid .7rem #fff;
border-bottom-right-radius: 3.3rem 1.2rem;
transform: rotateZ(8deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(7):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 2.5rem;
height: .9rem;
top: 2.3rem;
left: 6.1rem;
transform: rotateZ(77deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(8) {
position: absolute;
z-index: 1;
width: 4.2rem;
height: 2.6rem;
right: 50%;
bottom: 7.3rem;
margin-right: -.6rem;
border-style: solid;
border-color: #fff transparent transparent #fff;
border-width: .4rem 0 0 .6rem;
border-top-left-radius: 1.4rem 3.1rem;
transform: rotateZ(39deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(8):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
height: 1.2rem;
top: 1.2rem;
right: 3.8rem;
border-bottom: solid .7rem #fff;
border-bottom-left-radius: 3.3rem 1.2rem;
transform: rotateZ(-8deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(8):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 2.5rem;
height: .9rem;
top: 2.3rem;
right: 6.1rem;
transform: rotateZ(-77deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(9) {
position: absolute;
z-index: 1;
width: 4.2rem;
height: 2.3rem;
left: 50%;
bottom: 8.2rem;
margin-left: -.5rem;
border-style: solid;
border-color: #fff #fff transparent transparent;
border-width: .4rem .6rem 0 0;
border-top-right-radius: 1.8rem 3.1rem;
transform: rotateZ(-44deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(9):before {
content: " ";
position: absolute;
z-index: 1;
width: 4.1rem;
height: 1.2rem;
top: 1.1rem;
left: 3.8rem;
border-bottom: solid .7rem #fff;
border-bottom-right-radius: 3.3rem 1.2rem;
transform: rotateZ(10deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(9):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 2.9rem;
height: .9rem;
top: 2.7rem;
left: 6.2rem;
transform: rotateZ(82deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(10) {
position: absolute;
z-index: 1;
width: 4.2rem;
height: 2.3rem;
right: 50%;
bottom: 8.2rem;
margin-right: -.5rem;
border-style: solid;
border-color: #fff transparent transparent #fff;
border-width: .4rem 0 0 .6rem;
border-top-left-radius: 1.8rem 3.1rem;
transform: rotateZ(44deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(10):before {
content: " ";
position: absolute;
z-index: 1;
width: 4.1rem;
height: 1.2rem;
top: 1.1rem;
right: 3.8rem;
border-bottom: solid .7rem #fff;
border-bottom-left-radius: 3.3rem 1.2rem;
transform: rotateZ(-10deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.venom main div:nth-child(10):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 2.9rem;
height: .9rem;
top: 2.7rem;
right: 6.2rem;
transform: rotateZ(-82deg);
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch header {
background: #ff9900;
width: 5.8rem;
height: 7rem;
top: 2.9rem;
left: 50%;
margin-left: -2.9rem;
border-top-left-radius: 2.9rem 2.9rem;
border-top-right-radius: 2.9rem 2.9rem;
border-bottom-left-radius: .2rem 4.1rem;
border-bottom-right-radius: .2rem 4.1rem;
box-shadow: 0 0 2rem 0 #ff9900, 0 0 2.4rem 0 #ff9900;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch header:before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.5rem;
height: .7rem;
top: 4.3rem;
left: 1rem;
border-top-right-radius: 1.5rem .5rem;
border-bottom-left-radius: 1rem .7rem;
border-bottom-right-radius: .5rem .2rem;
border-bottom: solid 1px #ff9900;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch header:after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.5rem;
height: .7rem;
top: 4.3rem;
right: 1rem;
border-top-left-radius: 1.5rem .5rem;
border-bottom-left-radius: .5rem .2rem;
border-bottom-right-radius: 1rem .7rem;
border-bottom: solid 1px #ff9900;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main:before {
border-right-color: #ff9900;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main:after {
border-left-color: #ff9900;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main div:nth-child(1) {
position: absolute;
overflow: hidden;
z-index: 1;
width: 5.8rem;
height: 5.8rem;
left: 50%;
bottom: 8rem;
margin-left: -2.9rem;
border-radius: 50%;
border: solid .2rem #ffee00;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main div:nth-child(1):before {
content: " ";
position: absolute;
width: 2.2rem;
height: 2.6rem;
right: 0;
bottom: 0;
border-top: solid .8rem #ffee00;
border-left: solid .8rem #ffee00;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main div:nth-child(1):after {
content: " ";
position: absolute;
right: 1.4rem;
bottom: 1.8rem;
border-style: solid;
border-color: transparent #ffee00 #ffee00 transparent;
border-width: 2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main div:nth-child(2) {
position: absolute;
z-index: 1;
width: 0;
height: 0;
right: 1.4rem;
bottom: 1.8rem;
left: 50%;
bottom: 10.8rem;
margin-left: -1.1rem;
border-style: solid;
border-color: transparent #ff9900 #ff9900 transparent;
border-width: .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main div:nth-child(3) {
position: absolute;
z-index: -1;
width: 4rem;
height: 16.7rem;
left: 50%;
bottom: 1rem;
margin-left: -2rem;
border-top-left-radius: 2rem 2.9rem;
border-top-right-radius: 2rem 2.9rem;
border-bottom-left-radius: 2rem 4.1rem;
border-bottom-right-radius: 2rem 4.1rem;
box-shadow: 0 0 4rem 0 #ff9900, 0 0 4.4rem 0 #ff9900;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main div:nth-child(3):before {
content: " ";
position: absolute;
width: 16rem;
height: 5.7rem;
left: 50%;
bottom: 9rem;
margin-left: -8rem;
border-top-left-radius: 2rem 2.9rem;
border-top-right-radius: 2rem 2.9rem;
border-bottom-left-radius: 2rem 4.1rem;
border-bottom-right-radius: 2rem 4.1rem;
box-shadow: 0 0 8rem 0 #ff9900, 0 0 8.4rem 0 #ff9900;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.human-torch main div:nth-child(3):after {
content: " ";
position: absolute;
width: 8rem;
height: 5.7rem;
left: 50%;
bottom: 3rem;
margin-left: -4rem;
border-top-left-radius: 2rem 2.9rem;
border-top-right-radius: 2rem 2.9rem;
border-bottom-left-radius: 2rem 4.1rem;
border-bottom-right-radius: 2rem 4.1rem;
box-shadow: 0 0 8rem 0 #ff9900, 0 0 8.4rem 0 #ff9900;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header {
background: #0d6a2a;
z-index: 4;
width: 8.6rem;
height: 7.6rem;
top: 2rem;
left: 50%;
margin-left: -4.3rem;
border-top-left-radius: 4.3rem 6.3rem;
border-top-right-radius: 4.3rem 6.3rem;
border-bottom-left-radius: .4rem 1.3rem;
border-bottom-right-radius: .4rem 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header:before {
content: " ";
position: absolute;
z-index: 1;
top: .1rem;
left: .7rem;
border-style: solid;
border-color: transparent #0d6a2a transparent transparent;
border-width: 1.2rem 2.9rem 3.2rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(1) {
position: absolute;
background: #000;
z-index: 1;
width: 6.6rem;
height: 6rem;
top: 4.7rem;
left: 50%;
margin-left: -3.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
border-style: solid;
border-color: transparent transparent #0d6a2a transparent;
border-width: 0 2.8rem 2rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
border-style: solid;
border-color: transparent transparent #0d6a2a transparent;
border-width: 0 0 2rem 2.8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(2) {
position: absolute;
z-index: 1;
width: 4rem;
height: 1.2rem;
top: 10.9rem;
left: 50%;
margin-left: -2rem;
border-top: solid .4rem #aaa;
border-bottom: solid .4rem #aaa;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(3) {
position: absolute;
background: #ffcc00;
overflow: hidden;
z-index: 3;
width: 3.4rem;
height: 3.4rem;
top: 9.8rem;
left: 50%;
margin-left: -5rem;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.8rem;
height: 1rem;
top: 1.2rem;
left: -.7rem;
border-top: solid .4rem #fff;
border-bottom: solid .2rem #fff;
transform: rotateZ(55deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(4) {
position: absolute;
background: #ffcc00;
overflow: hidden;
z-index: 3;
width: 3.4rem;
height: 3.4rem;
top: 9.8rem;
right: 50%;
margin-right: -5rem;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.8rem;
height: 1rem;
top: 1.2rem;
left: -.7rem;
border-top: solid .4rem #fff;
border-bottom: solid .2rem #fff;
transform: rotateZ(55deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(5) {
position: absolute;
background: #666;
z-index: 1;
width: 6rem;
height: 5rem;
top: 3rem;
left: 50%;
margin-left: -3rem;
border-top: solid 3rem #999;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
top: 100%;
width: 6rem;
border-style: solid;
border-color: #666 transparent transparent transparent;
border-width: 2rem 2.1rem 0 2.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(6) {
position: absolute;
z-index: 1;
top: 6rem;
left: 50%;
margin-left: -3rem;
border-style: solid;
border-color: #999 transparent transparent transparent;
border-width: .6rem 3rem 0 3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(6):before {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
top: 2.6rem;
left: 50%;
margin-left: -1.7rem;
border-style: solid;
border-color: #999 transparent transparent transparent;
border-width: .8rem .8rem 0 .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(6):after {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
top: -.4rem;
left: 50%;
margin-left: -1.7rem;
border-style: solid;
border-color: transparent transparent #999 transparent;
border-width: 0 .4rem 3rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(7) {
position: absolute;
z-index: 1;
top: 5rem;
left: 50%;
margin-left: -2.3rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 1.3rem .8rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(7):before {
content: " ";
position: absolute;
top: .8rem;
left: -.2rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .4rem 0 0 1.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(7):after {
content: " ";
position: absolute;
background: #d5282b;
z-index: 2;
width: .4rem;
height: .3rem;
top: .6rem;
left: .3rem;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(8) {
position: absolute;
z-index: 1;
top: 5rem;
right: 50%;
margin-right: -2.3rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 .2rem .8rem 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(8):before {
content: " ";
position: absolute;
top: .8rem;
right: -.2rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: .4rem 1.5rem 0 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(8):after {
content: " ";
position: absolute;
background: #d5282b;
z-index: 2;
width: .4rem;
height: .3rem;
top: .6rem;
right: .3rem;
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(9) {
position: absolute;
background: #666;
z-index: 1;
width: 2.6rem;
height: .9rem;
top: 8.1rem;
left: 50%;
margin-left: -1.3rem;
border-style: solid;
border-color: #352f3a;
border-width: .4rem .3rem;
border-radius: .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(9):before {
content: " ";
position: absolute;
width: 2.6rem;
height: .9rem;
top: -.4rem;
left: -.3rem;
border-style: solid;
border-color: #999 transparent;
border-width: .2rem 1.3rem .2rem 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(9):after {
content: " ";
position: absolute;
width: 2rem;
height: .9rem;
top: -.4rem;
border-style: solid;
border-color: transparent #666;
border-width: 0 .2rem 0 .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(10) {
position: absolute;
overflow: hidden;
z-index: 1;
width: 6.6rem;
height: 6rem;
top: 3rem;
left: 50%;
margin-left: -3.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(10):before {
content: " ";
position: absolute;
z-index: 1;
width: 14.3rem;
height: 10rem;
top: -1.8rem;
left: -5rem;
border-left: solid 5rem #0d6a2a;
border-top-left-radius: 130% 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom header div:nth-child(10):after {
content: " ";
position: absolute;
z-index: 1;
width: 14.3rem;
height: 10rem;
top: -1.8rem;
right: -5rem;
border-right: solid 5rem #0d6a2a;
border-top-right-radius: 130% 100%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom main:before {
border-right-color: #00770e;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom main:after {
border-left-color: #00770e;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom main div:nth-child(1) {
position: absolute;
z-index: 1;
width: 22.6rem;
top: -16.4rem;
left: 50%;
margin-left: -11.3rem;
border-style: solid;
border-color: transparent transparent #0d6a2a transparent;
border-width: 0 2.9rem 2rem 2.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 16.8rem;
top: -.6rem;
left: 50%;
margin-left: -8.4rem;
border-style: solid;
border-color: transparent transparent #0d6a2a transparent;
border-width: 0 2.7rem .6rem 2.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.doctor-doom main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 11.4rem;
top: -1.9rem;
left: 50%;
margin-left: -5.7rem;
border-style: solid;
border-color: transparent transparent #0d6a2a transparent;
border-width: 0 1.9rem 1.3rem 1.9rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header {
background: #bb1100;
width: 6rem;
height: 7.6rem;
top: 2.2rem;
left: 50%;
margin-left: -3rem;
border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header:before {
content: " ";
position: absolute;
background: #eeaa22;
z-index: 1;
width: 5.4rem;
height: 5.2rem;
top: .7rem;
left: 50%;
margin-left: -2.7rem;
border-top-left-radius: 2.7rem;
border-top-right-radius: 2.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header:after {
content: " ";
position: absolute;
background: #bb1100;
z-index: -1;
width: 6.8rem;
height: 1.8rem;
top: 4.1rem;
left: 50%;
margin-left: -3.4rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(1) {
position: absolute;
z-index: 1;
width: 5.4rem;
top: 5.9rem;
left: 50%;
margin-left: -2.7rem;
border-style: solid;
border-color: #eeaa22 transparent transparent transparent;
border-width: 1.2rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(1):before {
content: " ";
position: absolute;
background: #eeaa22;
z-index: 1;
width: 3.4rem;
height: 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
top: 1.3rem;
border-style: solid;
border-color: #eeaa22 transparent transparent transparent;
border-width: .4rem .4rem 0 .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(2):before {
content: " ";
position: absolute;
background: #bb1100;
z-index: 1;
width: 1.8rem;
height: 2.4rem;
top: .6rem;
left: 50%;
margin-left: -.9rem;
border-bottom-left-radius: .2rem 2.4rem;
border-bottom-right-radius: .2rem 2.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 2.6rem;
top: 8.5rem;
left: 50%;
margin-left: -1.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 .2rem .3rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(3):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.7rem;
height: .9rem;
top: 4.5rem;
left: .8rem;
border-top-right-radius: 1.9rem .7rem;
border-bottom-left-radius: 1.6rem .9rem;
border-bottom-right-radius: .4rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(3):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.7rem;
height: .9rem;
top: 4.5rem;
right: .8rem;
border-top-left-radius: 1.9rem .7rem;
border-bottom-left-radius: .4rem .2rem;
border-bottom-right-radius: 1.6rem .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man header div:nth-child(4) {
position: absolute;
background: #bb1100;
z-index: 1;
width: 2.2rem;
height: .1rem;
top: 8rem;
left: 50%;
margin-left: -1.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main:before {
border-right-color: #bb1100;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main:after {
border-left-color: #bb1100;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(1) {
position: absolute;
background: #fff;
z-index: 1;
width: 3.6rem;
height: 3.6rem;
left: 50%;
bottom: 11rem;
margin-left: -1.8rem;
border-radius: 50%;
border: solid .2rem #ebb19a;
box-shadow: inset 0 0 0 .1rem #bb1100;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(2) {
position: absolute;
z-index: 1;
width: 0;
left: 50%;
bottom: 0;
margin-left: -3.9rem;
border-style: solid;
border-color: #eeaa22 transparent transparent transparent;
border-width: 6.2rem 3.9rem 0 3.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 7.8rem;
left: 50%;
bottom: 6.2rem;
margin-left: -3.9rem;
border-style: solid;
border-color: #eeaa22 transparent #eeaa22 transparent;
border-width: 1.5rem .6rem 1.5rem .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 7.8rem;
left: 50%;
bottom: 9.2rem;
margin-left: -3.9rem;
border-style: solid;
border-color: transparent transparent #eeaa22 transparent;
border-width: 0 3.9rem 1.4rem 3.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(3) {
position: absolute;
left: 50%;
bottom: 9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
left: -.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 3.2rem .4rem .4rem;
transform: rotateZ(-35deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
right: -.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 .4rem .4rem 3.2rem;
transform: rotateZ(35deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(4) {
position: absolute;
left: 50%;
bottom: 7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
left: -.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 3.2rem .4rem .4rem;
transform: rotateZ(-35deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 1;
right: -.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 .4rem .4rem 3.2rem;
transform: rotateZ(35deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(5) {
position: absolute;
left: 50%;
bottom: 5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
left: -.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 3.2rem .4rem .4rem;
transform: rotateZ(-35deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(5):after {
content: " ";
position: absolute;
z-index: 1;
right: -.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 .4rem .4rem 3.2rem;
transform: rotateZ(35deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(6):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 14.3rem;
margin-left: -11.3rem;
border-style: solid;
border-color: transparent #bb1100 #bb1100 transparent;
border-width: 0 3rem 1.3rem 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(6):after {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 15.6rem;
margin-left: -10.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 2.4rem 1rem 2.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(7):before {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 14.3rem;
margin-right: -11.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 #bb1100;
border-width: 0 1rem 1.3rem 3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(7):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 15.6rem;
margin-right: -10.3rem;
border-style: solid;
border-color: transparent transparent #bb1100 transparent;
border-width: 0 2.9rem 1rem 2.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(8) {
position: absolute;
z-index: 1;
top: -14.8rem;
left: 50%;
margin-left: -7rem;
transform: rotateZ(12deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(8):before {
content: " ";
position: absolute;
background: #fff;
z-index: 2;
top: 0;
left: 0;
width: 1.1rem;
height: 1.1rem;
border: solid .1rem #eeaa22;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(8):after {
content: " ";
position: absolute;
z-index: 1;
top: 0;
left: .5rem;
border-style: solid;
border-color: transparent transparent transparent #eeaa22;
border-width: .6rem 0 .5rem 4.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(9) {
position: absolute;
z-index: 1;
top: -14.8rem;
right: 50%;
margin-right: -7rem;
transform: rotateZ(-12deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(9):before {
content: " ";
position: absolute;
background: #fff;
z-index: 2;
top: 0;
right: 0;
width: 1.1rem;
height: 1.1rem;
border: solid .1rem #eeaa22;
border-radius: 50%;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(9):after {
content: " ";
position: absolute;
z-index: 1;
top: 0;
right: .5rem;
border-style: solid;
border-color: transparent #eeaa22 transparent transparent;
border-width: .6rem 4.7rem .5rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(10):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 9.6rem;
margin-left: -9.2rem;
border-style: solid;
border-color: #eeaa22 transparent transparent transparent;
border-width: .7rem 3.6rem 0 1.3rem;
transform: rotateZ(23deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.iron-man main div:nth-child(10):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 9.6rem;
margin-right: -9.2rem;
border-style: solid;
border-color: #eeaa22 transparent transparent transparent;
border-width: .7rem 1.3rem 0 3.6rem;
transform: rotateZ(-23deg);
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header {
background: #352f3a;
width: 6rem;
height: 7.6rem;
top: 2.2rem;
left: 50%;
margin-left: -3rem;
border-top-left-radius: 3rem;
border-top-right-radius: 3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header:before {
content: " ";
position: absolute;
background: #aaa;
z-index: 1;
width: 5.4rem;
height: 5.2rem;
top: .7rem;
left: 50%;
margin-left: -2.7rem;
border-top-left-radius: 2.7rem;
border-top-right-radius: 2.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header:after {
content: " ";
position: absolute;
background: #352f3a;
z-index: -1;
width: 6.8rem;
height: 1.8rem;
top: 4.1rem;
left: 50%;
margin-left: -3.4rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(1) {
position: absolute;
z-index: 1;
width: 5.4rem;
top: 5.9rem;
left: 50%;
margin-left: -2.7rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: 1.2rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(1):before {
content: " ";
position: absolute;
background: #aaa;
z-index: 1;
width: 3.4rem;
height: 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 3.4rem;
top: 1.3rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .4rem .4rem 0 .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(2):before {
content: " ";
position: absolute;
background: #352f3a;
z-index: 1;
width: 1.8rem;
height: 2.4rem;
top: .6rem;
left: 50%;
margin-left: -.9rem;
border-bottom-left-radius: .2rem 2.4rem;
border-bottom-right-radius: .2rem 2.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
width: 2.6rem;
top: 8.5rem;
left: 50%;
margin-left: -1.3rem;
border-style: solid;
border-color: transparent transparent #352f3a transparent;
border-width: 0 .2rem .3rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(3):before {
content: " ";
position: absolute;
background: #ff1800;
z-index: 1;
width: 1.7rem;
height: .9rem;
top: 4.5rem;
left: .8rem;
border-top-right-radius: 1.9rem .7rem;
border-bottom-left-radius: 1.6rem .9rem;
border-bottom-right-radius: .4rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(3):after {
content: " ";
position: absolute;
background: #ff1800;
z-index: 1;
width: 1.7rem;
height: .9rem;
top: 4.5rem;
right: .8rem;
border-top-left-radius: 1.9rem .7rem;
border-bottom-left-radius: .4rem .2rem;
border-bottom-right-radius: 1.6rem .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(4) {
position: absolute;
background: #352f3a;
z-index: 1;
width: 2.2rem;
height: .1rem;
top: 8rem;
left: 50%;
margin-left: -1.1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine header div:nth-child(4):before {
content: " ";
position: absolute;
background: #ee1100;
z-index: 1;
width: .7rem;
height: .7rem;
top: -4.7rem;
left: -2.4rem;
border: solid 1px #352f3a;
border-radius: 50%;
box-shadow: inset 0 0 .3rem 0 #ee1100, inset 0 0 0 .4rem #fff;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main:before {
border-right-color: #352f3a;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main:after {
border-left-color: #352f3a;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(1):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 4.6rem;
height: 4.6rem;
left: 50%;
bottom: 10.5rem;
margin-left: -2.3rem;
border-radius: 50%;
border: solid .2rem #aaa;
box-shadow: inset 0 0 0 .1rem #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: -1;
width: 22.6rem;
bottom: 14.4rem;
left: 50%;
margin-left: -11.3rem;
border-style: solid;
border-color: transparent transparent #352f3a transparent;
border-width: 0 2.4rem 2.4rem 2.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 3rem;
margin-left: -4.6rem;
border-style: solid;
border-color: transparent transparent transparent #aaa;
border-width: 1rem 0 6rem 4.3rem;
transform: rotateZ(-38deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 3rem;
margin-right: -4.6rem;
border-style: solid;
border-color: transparent #aaa transparent transparent;
border-width: 1rem 4.3rem 6rem 0;
transform: rotateZ(38deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(3) {
position: absolute;
z-index: 1;
width: 7rem;
left: 50%;
bottom: 7.3rem;
margin-left: -3.5rem;
border-style: solid;
border-color: #352f3a transparent transparent transparent;
border-width: 2.5rem 1.7rem 0 1.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
left: 50%;
bottom: 12.1rem;
margin-left: -11.7rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .7rem 6.6rem 0 1.3rem;
transform: rotateZ(23deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 1;
right: 50%;
bottom: 12.1rem;
margin-right: -11.7rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .7rem 1.3rem 0 6.6rem;
transform: rotateZ(-23deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(5) {
position: absolute;
z-index: 1;
width: 3.8rem;
left: 50%;
bottom: 9.1rem;
margin-left: -1.9rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .2rem .8rem 0 .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.8rem;
top: 1.2rem;
left: 50%;
margin-left: -1.4rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .2rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(5):after {
content: " ";
position: absolute;
z-index: 1;
width: 2.8rem;
top: 2.6rem;
left: 50%;
margin-left: -1.4rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .2rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(6) {
position: absolute;
z-index: 1;
width: 2.8rem;
left: 50%;
bottom: 4.9rem;
margin-left: -1.4rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .2rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(6):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.8rem;
top: 1.2rem;
left: 50%;
margin-left: -1.4rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .2rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(6):after {
content: " ";
position: absolute;
z-index: 1;
width: 1.2rem;
top: 2.6rem;
left: 50%;
margin-left: -.6rem;
border-style: solid;
border-color: #aaa transparent transparent transparent;
border-width: .2rem .6rem 0 .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(7) {
position: absolute;
background: #352f3a;
z-index: 1;
width: 4.8rem;
height: 4.8rem;
left: 50%;
bottom: 15rem;
margin-left: 3.9rem;
border-radius: 50%;
border: solid .1rem #352f3a;
box-shadow: inset 0 0 0 .3rem #aaa;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(7):before {
content: " ";
position: absolute;
background: #ff1800;
z-index: -1;
width: 2.6rem;
height: 1.1rem;
top: -.8rem;
left: 50%;
margin-left: -1.3rem;
border-style: solid;
border-color: #352f3a #352f3a #aaa #352f3a;
border-width: .2rem 1.2rem .4rem 1.2rem;
box-shadow: inset 0 -.3rem 0 0 #352f3a;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(7):after {
content: " ";
position: absolute;
background: #352f3a;
width: 1.8rem;
height: 1.8rem;
top: 50%;
left: 50%;
margin-left: -.9rem;
margin-top: -.9rem;
border-radius: 50%;
border: solid .1rem #666;
box-shadow: -.9rem -.9rem 0 -.6rem #352f3a, -.9rem -.9rem 0 -.5rem #666, -1.3rem 0 0 -.6rem #352f3a, -1.3rem 0 0 -.5rem #666, -.9rem .9rem 0 -.6rem #352f3a, -.9rem .9rem 0 -.5rem #666, 0 1.3rem 0 -.6rem #352f3a, 0 1.3rem 0 -.5rem #666, .9rem .9rem 0 -.6rem #352f3a, .9rem .9rem 0 -.5rem #666, 1.3rem 0 0 -.6rem #352f3a, 1.3rem 0 0 -.5rem #666, .9rem -.9rem 0 -.6rem #352f3a, .9rem -.9rem 0 -.5rem #666, 0 -1.3rem 0 -.6rem #352f3a, 0 -1.3rem 0 -.5rem #666;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(8) {
position: absolute;
z-index: 1;
width: 4.1rem;
height: 1rem;
left: 50%;
bottom: 16.8rem;
margin-left: -7.5rem;
border-style: solid;
border-color: #352f3a transparent transparent #352f3a;
border-width: .4rem .4rem 0 3.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(8):before {
content: " ";
position: absolute;
background: #aaa;
z-index: 1;
width: 5rem;
height: 1.9rem;
top: -2.3rem;
left: -4.6rem;
border-style: solid;
border-color: #352f3a;
border-width: .2rem .1rem .3rem .1rem;
box-shadow: inset 0 .4rem 0 0 #aaa, inset 0 .5rem 0 0 #352f3a;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.war-machine main div:nth-child(8):after {
content: " ";
position: absolute;
background: #352f3a;
z-index: 1;
width: .6rem;
height: .6rem;
top: -1.4rem;
left: -4.4rem;
border-radius: 50%;
box-shadow: 4rem -.8rem 0 -.2rem #ff1800, 3.2rem -.8rem 0 -.2rem #ff1800, 2.4rem -.8rem 0 -.2rem #ff1800, 1.6rem -.8rem 0 -.2rem #ff1800, .8rem -.8rem 0 -.2rem #ff1800, 0 -.8rem 0 -.2rem #ff1800, .8rem 0 0 0 #352f3a, 1.6rem 0 0 0 #352f3a, 2.4rem 0 0 0 #352f3a, 3.2rem 0 0 0 #352f3a, 4rem 0 0 0 #352f3a;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header {
position: absolute;
background: #ff1800;
width: 5.8rem;
height: 6.8rem;
top: 3rem;
left: 50%;
margin-left: -2.9rem;
border-top-left-radius: 2.9rem 2.9rem;
border-top-right-radius: 2.9rem 2.9rem;
border-bottom-left-radius: .2rem 3.9rem;
border-bottom-right-radius: .2rem 3.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(1) {
position: absolute;
background: #eeaa22;
z-index: -1;
width: 6.6rem;
height: 1.1rem;
top: 4rem;
left: 50%;
margin-left: -3.3rem;
border-radius: .3rem .3rem .8rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 0;
left: 100%;
bottom: 50%;
margin-left: -.2rem;
margin-bottom: .3rem;
border-style: solid;
border-color: transparent transparent #eeaa22 transparent;
border-width: 0 .4rem 1.7rem 0;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 0;
right: 100%;
bottom: 50%;
margin-right: -.2rem;
margin-bottom: .3rem;
border-style: solid;
border-color: transparent transparent #eeaa22 transparent;
border-width: 0 0 1.7rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(2):before {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.9rem;
height: .9rem;
top: 4.3rem;
left: .7rem;
border-top-right-radius: 1.9rem .5rem;
border-bottom-left-radius: 1.3rem .9rem;
border-bottom-right-radius: .6rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(2):after {
content: " ";
position: absolute;
background: #fff;
z-index: 1;
width: 1.9rem;
height: .9rem;
top: 4.3rem;
right: .7rem;
border-top-left-radius: 1.9rem .5rem;
border-bottom-left-radius: .6rem .4rem;
border-bottom-right-radius: 1.3rem .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(3) {
position: absolute;
z-index: 2;
width: 3.8rem;
top: 7.6rem;
left: 50%;
margin-left: -1.9rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 1.2rem 1rem 0 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 2;
width: 4.8rem;
top: -3.5rem;
left: 50%;
margin-left: -2.4rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 2.3rem .5rem 0 .5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(4) {
position: absolute;
z-index: 2;
top: 8.4rem;
left: 50%;
margin-left: -.9rem;
border-style: solid;
border-color: transparent transparent #ff1800 transparent;
border-width: 0 .9rem .4rem .9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 2;
top: -3.1rem;
left: 50%;
margin-left: -2.4rem;
border-style: solid;
border-color: #ff1800 transparent transparent transparent;
border-width: .8rem 2rem 0 .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash header div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 2;
top: -3.1rem;
right: 50%;
margin-right: -2.4rem;
border-style: solid;
border-color: #ff1800 transparent transparent transparent;
border-width: .8rem .8rem 0 2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash main:before {
border-right-color: #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash main:after {
border-left-color: #ff1800;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash main div:nth-child(1) {
position: absolute;
background: #fff;
z-index: 2;
width: 5.6rem;
height: 5.6rem;
left: 50%;
bottom: 8.2rem;
margin-left: -2.8rem;
border-radius: 50%;
border: solid #eeaa22 .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 0;
right: 50%;
bottom: 50%;
margin-right: -1.6rem;
margin-bottom: -.2rem;
border-style: solid;
border-color: transparent transparent #eeaa22 transparent;
border-width: 0 0 3.7rem 2rem;
transform: skew(-33deg);
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.flash main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 0;
top: 50%;
left: 50%;
margin-top: -.2rem;
margin-left: -1.6rem;
border-style: solid;
border-color: #eeaa22 transparent transparent transparent;
border-width: 3.7rem 2rem 0 0;
transform: skew(-33deg);
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header {
position: absolute;
background: #a72201;
width: 6rem;
height: 7rem;
top: 2.8rem;
left: 50%;
margin-left: -3rem;
border-top-left-radius: 3rem 3.7rem;
border-top-right-radius: 3rem 3.7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header div:nth-child(1) {
position: absolute;
width: 6rem;
height: 3rem;
top: -.8rem;
left: 0;
border-bottom: solid 1rem #a72201;
border-radius: .8rem / 1.3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header div:nth-child(2):before {
content: " ";
position: absolute;
background: #ff1800;
z-index: 1;
width: 1.5rem;
height: .7rem;
top: 4.6rem;
left: 1rem;
border-top-right-radius: 1.5rem .5rem;
border-bottom-left-radius: 1rem .7rem;
border-bottom-right-radius: .5rem .2rem;
border-bottom: solid 1px #a72201;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header div:nth-child(2):after {
content: " ";
position: absolute;
background: #ff1800;
z-index: 1;
width: 1.5rem;
height: .7rem;
top: 4.6rem;
right: 1rem;
border-top-left-radius: 1.5rem .5rem;
border-bottom-left-radius: .5rem .2rem;
border-bottom-right-radius: 1rem .7rem;
border-bottom: solid 1px #a72201;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header div:nth-child(3) {
position: absolute;
width: 4.8rem;
top: 7.4rem;
left: 50%;
margin-left: -2.4rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 1.6rem 1.6rem 0 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header div:nth-child(3):before {
content: " ";
position: absolute;
width: 4.8rem;
top: -3.2rem;
left: 50%;
margin-left: -2.4rem;
border-style: solid;
border-color: transparent transparent #ffaa77 transparent;
border-width: 0 .2rem 1.6rem .2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header div:nth-child(4):before {
content: " ";
position: absolute;
background: #a72201;
width: 2.9rem;
height: 1.5rem;
top: 5.2rem;
left: 50%;
margin-left: -2.8rem;
border-bottom-right-radius: 2.6rem 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil header div:nth-child(4):after {
content: " ";
position: absolute;
background: #a72201;
width: 2.9rem;
height: 1.5rem;
top: 5.2rem;
right: 50%;
margin-right: -2.8rem;
border-bottom-left-radius: 2.6rem 1rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil main:before {
border-right-color: #a72201;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil main:after {
border-left-color: #a72201;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil main div:nth-child(1):before {
content: "D";
position: absolute;
z-index: 1;
color: #ff1800;
font-size: 5.8rem;
font-style: italic;
left: 50%;
top: 0;
margin-top: -13.9rem;
margin-left: -2.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.dare-devil main div:nth-child(1):after {
content: "D";
position: absolute;
z-index: 1;
color: #ff1800;
font-size: 5.8rem;
font-style: italic;
left: 50%;
top: 0;
margin-top: -12.9rem;
margin-left: -1rem;
}

.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header {
background: #ffaa77;
width: 6rem;
height: 6.2rem;
top: 4rem;
left: 50%;
margin-left: -3rem;
border-top-left-radius: 2.7rem;
border-top-right-radius: 2.7rem;
border-top: solid 1.2rem #1d1216;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header:before {
content: " ";
position: absolute;
background: #ffaa77;
z-index: 1;
width: 7rem;
height: 1.6rem;
top: 2rem;
left: 50%;
margin-left: -3.5rem;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
border-bottom-left-radius: 1.2rem .8rem;
border-bottom-right-radius: 1.2rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header:after {
content: " ";
position: absolute;
z-index: 1;
width: 6rem;
left: 0;
bottom: 0;
margin-bottom: -2rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: 2rem 2rem 0 2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header div:nth-child(1) {
position: absolute;
z-index: 1;
width: 3rem;
height: 3.6rem;
top: -.8rem;
left: 1.2rem;
border-top: solid .9rem #1d1216;
border-top-left-radius: 3rem 1.9rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.3rem;
height: .7rem;
top: 1.8rem;
right: 50%;
margin-right: .3rem;
border-top-right-radius: 2.2rem .5rem;
border-top: solid .3rem black;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header div:nth-child(2):after {
content: " ";
position: absolute;
z-index: 1;
top: 1.8rem;
left: 50%;
margin-left: -2.9rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: .5rem .6rem 0 .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header div:nth-child(3):before {
content: " ";
position: absolute;
z-index: 1;
width: 2.3rem;
height: .7rem;
top: 1.8rem;
left: 50%;
margin-left: .3rem;
border-top-left-radius: 2.2rem .5rem;
border-top: solid .3rem black;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher header div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
top: 1.8rem;
right: 50%;
margin-right: -2.9rem;
border-style: solid;
border-color: #ffaa77 transparent transparent transparent;
border-width: .5rem .3rem 0 .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main:before {
border-right-color: #3a0000;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main:after {
border-left-color: #3a0000;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(1) {
position: absolute;
z-index: 2;
width: 0;
left: 50%;
bottom: 0;
margin-left: -4.4rem;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-width: 17rem 4.4rem 0 4.4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(1):before {
content: " ";
position: absolute;
z-index: 1;
width: 11rem;
left: 50%;
bottom: 15.5rem;
margin-left: -5.5rem;
border-style: solid;
border-color: #3a0000 transparent transparent transparent;
border-width: 4.6rem .7rem 0 .7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(1):after {
content: " ";
position: absolute;
z-index: 1;
width: 7.8rem;
left: 50%;
bottom: 15.5rem;
margin-left: -3.9rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 .7rem 1.4rem .7rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(2):before {
content: " ";
position: absolute;
z-index: 2;
width: 5rem;
left: 50%;
bottom: 8.8rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
border-width: .9rem .3rem 0 .3rem;
margin-left: -2.5rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(2):after {
content: " ";
position: absolute;
background: #000;
z-index: 2;
width: 3.8rem;
height: .8rem;
left: 50%;
bottom: 8.7rem;
margin-left: -1.9rem;
border-top-left-radius: 1.9rem .8rem;
border-top-right-radius: 1.9rem .8rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(3) {
position: absolute;
background: #fff;
z-index: 2;
width: 5.6rem;
height: 4.2rem;
left: 50%;
bottom: 9.8rem;
margin-left: -2.8rem;
border-top-left-radius: 2.6rem 2.6rem;
border-top-right-radius: 2.6rem 2.6rem;
border-bottom-left-radius: .5rem 1.6rem;
border-bottom-right-radius: .5rem 1.6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(3):before {
content: " ";
position: absolute;
background: #000;
z-index: 1;
width: 4.8rem;
height: 1.3rem;
top: 2.7rem;
left: 50%;
margin-left: -2.4rem;
border-top-left-radius: .4rem;
border-top-right-radius: .4rem;
border-bottom-left-radius: 2rem .6rem;
border-bottom-right-radius: 2rem .6rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(3):after {
content: " ";
position: absolute;
z-index: 1;
width: 4.8rem;
top: 2.5rem;
left: 50%;
margin-left: -2.4rem;
border-style: solid;
border-color: #fff transparent #fff transparent;
border-width: 1.1rem 2.2rem .7rem 2.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(4) {
position: absolute;
background: #fff;
z-index: 2;
width: 2.4rem;
height: .9rem;
left: 50%;
bottom: 8.8rem;
margin-left: -1.2rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(4):before {
content: " ";
position: absolute;
z-index: 1;
width: 2rem;
height: 1.8rem;
top: .9rem;
left: 50%;
margin-left: -1rem;
border-style: solid;
border-color: transparent #fff transparent #fff;
border-width: 0 .4rem 0 .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(4):after {
content: " ";
position: absolute;
z-index: 1;
width: .8rem;
height: 2rem;
top: .9rem;
left: 50%;
margin-left: -.4rem;
border-style: solid;
border-color: transparent #fff transparent #fff;
border-width: 0 .3rem 0 .3rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(5):before {
content: " ";
position: absolute;
z-index: 2;
width: 1rem;
left: 50%;
bottom: 9.3rem;
margin-left: -.5rem;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-width: 0 .4rem 1rem .4rem;
}
.codepen-wrapper[data-codepen-id="XbRGXd"] #hero.punisher main div:nth-child(5):after {
content: " ";
position: absolute;
z-index: 2;
width: .4rem;
bottom: 9.3rem;
left: 50%;
margin-left: -.2rem;
border-style: solid;
border-color: transparent transparent #fff transparent;
border-width: 0 .2rem 2rem .2rem;
}